@supports rule

Specifies CSS to be conditioned on browser support of the feature.

Syntax

@supports <supports_condition>

Parameters

<supports_condition>

The condition or conditions to be tested for support.

Remarks

Whitespace is required after a "not" and on both sides of an "or" or "and".

"And", "or", and "not" operators cannot be mixed without a layer of parentheses.

Examples

The example below will apply the styles inside of the conditional group when display: flex is supported.

@supports (display: flex) {
   ...
}

The example below will apply the styles inside of the conditional group when display: flex is not supported.

@supports not (display: flex) {
   ...
}

The example below will apply the styles inside of the conditional group when display: flex is supported or when any of the other vendor-prefixed versions of display: flex are supported. Each property: value pair must be within parentheses.

@supports (display: flex) or
          (display: -ms-flexbox) or
          (display: -moz-box) or
          (display: -webkit-box) or
          (display: -webkit-flex) {
   ...
}

The example below will apply the styles inside of the conditional group when transition-property is supported, or when animation-name and transform are supported.

@supports (transition-property: color) or
          ((animation-name: myAnimation) and 
           (transform: rotate(25deg))) {
   ...
}

See also

Reference

styleSheet