mm

January 5, 2016 WATB Team
Follow me on Twitter

The CSS specification is huge, but as a front-end developer or designer, you probably only know a fraction of what’s there. This means that there’s a lot in the specification you’ll have never come across before. But because of it’s size, I’ve trawled it for you and picked out 5 weird CSS properties I’d love you to find out about. Some you can use now, some you can’t use at all, but hopefully this will open your eyes to the size and breadth of the spec and encourage you to explore more properties.

CSS @supports

For years we’ve trusted Javascript and feature detection libraries such as Modernizr so we can elegantly degrade or enhance our web projects for different browsers. But this often leads to ugly flashes of content and isn’t entirely reliable. Thankfully, the CSS spec contains a property called @support that allows us to feature detect with CSS. This brings about many benefits, such as reduced dependency on JS, whilst feeling a lot less hacky and leading to easier to maintain code.

Example:

@supports ( display: flexbox ) { rules here }

We may be using flexbox, but still wish to support older browsers. This particular rule allows us to wrap our flexbox CSS within a @supports conditional, so only browsers that support flexbox bother applying the rules.

Supported Browsers

More Examples

CSS Resize

Commonly, we use JS libraries such as jQuery UI to allow users to dynamically interact with elements including moving them and resizing them. However, the CSS property resize allows us to achieve the same end result, when assigned to an element, the user will be able to drag the corners of the element to resize it.

Example:

.module { resize: both; }

This particular rule allows the element .module to be resized both width ways and height ways.

.module { resize: horizontal; }

This rule will only allow the element to be resized horizontally.

Supported Browsers

More Examples

CSS Hanging Punctuation

If you were reading the previous two, then I really hope this one will be new to you! It certainly was a property I had never come across before. That said, it should be a term familiar to anyone who works with type. Effectively, it allows us to move the position of punctuation marks to either within the margins of the text element or to the outside. Previously this was achieved using text-indent hacks but now there is a specific property. Sadly however, no browsers have yet adopted the property.

Example:

.text { hanging-punctuation:force-end; }

This rule makes the stop or comma at the end hang.

Supported Browsers – None. Boo, hiss, boo.

More info

CSS currentcolor

A property that allows you to assign your color property value to other properties that also accept a color value.

Example:

div { color: red; border: 5px solid currentColor; }

The border will be red. This is almost a sort of halfway house to using CSS variables. In all likelihood, if you’re already writing Sass you’ll have little use for this property but it can certainly be useful for those who write vanilla CSS still. Browser support is excellent too.

Supported Browsers

CSS @scope

We have scope in other languages, but until now scope has never existed in CSS. This all changes with the @scope rule. With Sass for example, all variables we declare effectively exist within a global scope. We can’t re-define a variable within a media query or an element.

We could use nesting to achieve a vaguely similar end result, but nesting increases specificity. I still personally nest (99% of the time only 1 level deep) but many developers are calling on the industry to drop it altogether. This seems particularly an issue on larger scale projects.

CSS @scope allows us to finally use scoping but without nesting.

Example:

@scope div {
  span {
    color: blue;
  }
}
@scope section {
  span {
    color: orange;
  }
}

In the following code:

<div>
  <section>
    <div>
      <span>text</span>
    </div>
  </section>
</div>

The text will be blue.

Sadly, browser support for @scope is non-existent, so we can’t use it yet.

More Info

Wrap Up

Ok – so much of the above is probably quite useless but that wasn’t really the point. I wanted to highlight the scale of the CSS spec, and encourage you as a developer to expand your knowledge of CSS. Some of these new properties may not be in use yet, but knowing about them in advance could also give you an advantage.

Good luck!

Looking for more tips?

Jump on our mailing list & get digital goodness straight to your inbox; including helpful tips, tricks and the latest articles surrounding marketing, web design and branding.

Sign up →