CSS Click Chart

Conditional Rules with @supports

Allows native feature detection using @supports, similar to what's done using a tool like Modernizr.

Specification

Feature queries: the @supports rule on W3C

Example Code

@supports (display: flex) {
  .parent {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    justify-content: center;
  }

  .child {
    flex-grow: 1;
    max-width: 50px;
  }

}

Live Demonstration

The boxes below will fall back to inline-block in old browsers but will use flexbox in supporting browsers.

Browser Support

Can I Use css-featurequeries? Data on support for the conditional-supports feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles

Using Feature Queries in CSS