{@supports} At-Supports Property | CSS: Presentation Layer

Using the @supports at-supports rule enables developers to serve up styles to particular user agents's that support the css declaration included in the at-supports rule. In the example below, the style's will only be applied to user agents that support display:flex (and @supports!):

@supports (display:flex) {
  /** put styles here **/
}

@supports can be used to check for multiple supports, just like media queries:

By applying not() (negation) within @supports, we can test for user agent support; the css below is only applicable to user agents that do not support display:flex:

      @supports not(display:flex) {
      /** back up css here **/
      }