Native CSS Feature Detection With @supports

Consider the following CSS snippet:

 .blur-text { color: transparent; text-shadow: 0 0 5px #000; } 

Any element with a class of blur-text will render a burred text effect:

Lovely. Unfortunately, not all browsers support text-shadow. IE9 and below apply the transparent color but do not display the shadow — the text becomes invisible. We needed to rely on JavaScript solutions such Modernizr or our own text-shadow detection code to detect CSS support and react accordingly.

Using JavaScript to detect CSS3 properties is awful. It’ll fail if JavaScript’s disabled and feels dirty. I have to bathe in disinfectant every time I do it. Fortunately, another solution has arrived in native CSS: the @supports rule. The basic syntax:

 @supports <condition> { /* rules */ } 

We’d use the following code for our blurred text:

 @supports (text-shadow: 0 0 5px #000) { .blur-text { color: transparent; text-shadow: 0 0 5px #000; } } 

You can use logical AND, OR and NOT, e.g.

 @supports ( (display: table-cell) and (display: list-item) ) { /* styles */ } 

as well as check for vendor-specific prefixes:

 @supports ( (-webkit-transform: rotate(90deg)) or (-moz-transform: rotate(90deg)) or (-ms-transform: rotate(90deg)) or (-o-transform: rotate(90deg)) or (transform: rotate(90deg)) ) { /* styles */ } 

Older browsers which don’t understand @support will not render the styles — but they’re unlikely to understand the properties you’re attempting to use.

Unfortunately, @supports has fairly limited browser compatibility. At the time of writing, only Opera 12.1 features it as standard. It’s available in Firefox 17 if the layout.css.supports-rule.enable about:config setting is changed to true. It should also be implemented in Chrome 24 but it may be some time before @support arrives in IE and Safari.

That said, @supports is promising and the days of having to use Modernizr-like JavaScript style detection are numbered.