CSS - @supports

The @supports CSS at-rule associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a supports condition.

Examples

Testing for the support of a given CSS property

CSS
@supports (animation-name: test) {
    … /* specific CSS applied when animations are supported unprefixed */
    @keyframes { /* @supports being a CSS conditional group at-rule, it can includes other relevant at-rules */
      …
    }
}

Testing for the support of a given CSS property or a prefixed version

CSS
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /* specific CSS applied when 3D transforms, eventually prefixed, are supported */
}

Testing for the non-support of a specific CSS property

CSS
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* specific CSS applied to simulate text-align-last:justify */
}

Testing for the support of custom properties

CSS
@supports (--foo: green) {
  body {
    color: green;
  }
}

Syntax  

A supports condition consists of one or several declarations combined by different logical operators. Precedence of operators can be overruled by using parentheses.

Declaration syntax

The simplest expression is a CSS declaration, that is a CSS property name followed by a value, separated by a colon. The following expression

CSS
( transform-origin: 5% 5% )

returns true if the transform-origin implements a syntax considering 5% 5% as valid.

A CSS declaration is always surrounded by parentheses.

The not operator

The not operator can precede any expression to create a new expression, resulting in the negation of the original expression. The following expression

CSS
not ( transform-origin: 10em 10em 10em )

returns true if transform-origin doesn't implement a syntax considering 10em 10em 10em as valid.

Like any operator, the not operator can be applied to a declaration of any complexity. The following examples are all valid expressions:

CSS
not ( not ( transform-origin: 2px ) )
(display: flexbox) and ( not (display: inline-grid) )

Note: there is no need to enclose the not operator between two parentheses when at the top level. To combine it with other operators, like and and or, the parentheses are required.

The and operator

From two expressions, the and operator creates a new expression consisting in the conjunction of the two original ones; the resulting expression is true only if both of the original expressions also resolve to true. In this example, the complete expression resolves to true if and only if the two expressions are simultaneously true:

CSS
(display: table-cell) and (display: list-item)

Several conjunctions can be juxtaposed without the need of more parentheses:

CSS
(display: table-cell) and (display: list-item) and (display:run-in)

is equivalent to:

CSS
(display: table-cell) and ((display: list-item) and (display:run-in))

The or operator

From two expressions, the or operator creates a new expression consisting in the disjunction of the two original ones; the resulting expression is true if one, or both, of the original expressions also resolves to true. In this example, the complete expression resolves to true if at least one of the two expressions is true:

CSS
( transform-style: preserve ) or ( -moz-transform-style: preserve )

Several disjunctions can be juxtaposed without the need of more parentheses:

CSS
( transform-style: preserve ) or ( -moz-transform-style: preserve ) or 
( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )

is equivalent to:

CSS
( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or 
(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))

Note: when using both and and or operators, the parentheses must be used in order to define the order in which they apply. If not, the condition is invalid leading to the whole at-rule to be ignored.

Formal syntax

CSS
@supports <supports-condition> {
  <group-rule-body>
}

Description  

The @supports CSS at-rule associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a supports condition.

@supports gives CSS the ability to perform a feature query.

The @supports at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule and can be accessed via the CSS object model interface CSSSupportsRule.

Browser Compatibility  

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 28.0 (Yes) 22 (22) [1] No support 12.1 9
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support ? 22.0 (22) [1] No support 12.1 9 28.0

[1] Gecko 17 to Gecko 21 supported this feature only if the user enables it by setting the config value layout.css.supports-rule.enabled to true.

See Also  

Specifications  

Specification Status Comment
CSS Conditional Rules Module Level 3
The definition of '@supports' in that specification.
Candidate Recommendation Initial definition.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@supports

At-rule CSS CSS3 CSS3-conditionals Layout Reference Web