Since the Web became a more beautiful place with the advent of CSS, there’s always been a struggle in the use of more modern features of CSS with browsers which are either slower to adopt or more cautious in the way the implement features.
There have been many potential solutions for this issue.
First, baked directly into the CSS specification and the browser implementations is the fact that if a browser doesn’t understand a property, it will ignore it instead of sending the user an error. Silently failing means we can progressively enhance web applications without worrying about unsightly error messages being displayed.
Then, Internet Explorer — a long-time culprit of compatibility issues — implemented the idea of conditional stylesheets. You could now build your site the way you wanted it and when things broke (such as z-index in IE7 or float and width issues in IE6) you could specify fixes for them in stylesheets only accessible by those specific versions of Internet Explorer. This means we can gracefully degrade the experience for out-of-date browsers.
This allows for a lot of flexibility, but is also odd bloat that appears in your <html> DOM node.
All of these methods are great, but they aren’t native citizens of the specification. In the CSS Conditional Rules Module specification — the module that contains the media queries we all know and love for responsive design — the humble Feature Query also lives. A first-class citizen of CSS, the feature query allows for feature detection built right in and built with a syntax designers will already be familiar with based on years of building responsive sites using media queries.
The syntax is relatively easy:
Here’s a concrete example using CSS Grid – an amazing new layout property that isn’t in even modern browsers until March or April 2017.
Here’s what the example looks like with no feature query. If you’re in a browser that supports Grid Layout – which you’re probably not – then you’ll see a great grid layout. If you’re not, you’ll see full-width block-level divs with images with no explanation.
In this example, we simply hide the alert message from all browsers that DO support Grid layout and allow every other browser to use the default value set in the CSS for the bar allowing it to be visible.
In this example, we build a nice layout utilizing the Flexbox property of CSS — which has support in all modern browsers — and then utilize Feature Queries to rebuild the grid using the Grid Layout properties.
This way you get a nice layout either way and for those that have enabled the use of CSS Grid, they get a really nice layout.
There are loads of methods for progressively enhancing your site, but CSS Feature Queries are by far one of the cleanest ways of doing it that we’ve ever had.
You can view all three codepens together in my CodePen Feature Query Collection
If you have any questions, I’d be more than happy to answer in the comments or on Twitter.