HTML & CSS
Article
By Craig Buckler

Native CSS Feature Detection With @supports

By Craig Buckler

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:

CSS3 Blurred Text

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.

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account