Feature Detection in CSS (CSS @supports)

Can-I-Use-Feature-Queries

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

4 Comments

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.