CSS Feature Detection Using @supports In Your CSS

You have used CSS for years, targeting elements in your code and styling as you wish. Perhaps you’ve even developed code that checked to see if your styling would look great in all browsers and implemented a fall-back in case your preferred styling wasn’t supported in the viewer’s browser. You might have used Modernizr for that detection and created conditionals with Javascript and CSS to handle each situation.

Well for some time now a few browsers have supported a feature query in CSS that allows you do this without any extra Javascript libraries right in your CSS using the @supports rule.

Admittedly I have not used this in a production sense yet but it looks to be very promising and is all ready supported 60% globally in Firefox 34+, Chrome 31+, Opera 26+, Android Browser and Chrome for Android (source caniuse.com). IE, Safari and iOS Safari and Opera Mini currently do not support the @supports rule.

css-feature-queries

The @supports rule itself in your CSS file will work much like a media query rule (@media) except you’ll include an @supports rule for the “not” supported case. The syntax will look like:

I won’t go and re-write entire lessons and examples of this rule. There is an excellent article over at tutsplus.com by George Martsoukos that speaks a little to using Modernizr, Javascipt detection and pure CSS Feature Queries. In their article there are live coding examples on Codepen, a brief introduction to CSS variables, and a few polyfill fall-backs.

For the full W3C Candidate Recommendation paper click here.

CSS feature detection in pure CSS… it’s coming!

Tags: , , ,

Leave a Reply

Other tags used in my blog:

 (1)  (6)  (1)  (16)  (1)  (1)  (17)  (1)  (16)  (1)  (1)  (7)  (1)  (4)  (15)  (5)  (2)  (27)  (9)  (1)  (11)  (4)  (4)  (4)  (8)  (1)  (6)  (1)  (4)  (1)  (1)  (1)  (3)  (1)  (3)  (4)  (7)  (2)  (3)  (4)  (1)  (1)  (2)  (1)  (7)  (9)  (11)  (2)  (6)  (1)  (3)  (16)  (2)  (3)  (1)  (5)  (1)  (26)  (4)  (4)  (9)