Feature Detection in CSS (CSS @supports)


There’s a good introduction to @supports on Mozilla Hacks:

With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer.

Progressive enhancement in it’s finest form:

/* fallback code for older browsers */

@supports (display: grid) {
    /* code for newer browsers */
    /* including overrides of the code above, if needed */

Apart from enhancing your styles, you could also use to show/hide warnings. The trick is to show a warning by default, and then hide it

.warning {
  /* style for warning box here …*/

@supports (display: grid) {
  /* hide warning box */
  .warning {
    display: none;

  /* extra styles here … */

Handy when making tech-demos.

What about browser support?

Feature Queries have been around since mid–2013. With the imminent release of Safari 10, I believe it’s past time for us to add @supports to our toolbox.

Mozilla Hacks: Using Feature Queries in CSS →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation


Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.