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 →