Summary

The @supportsCSSat-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.

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

The and operator

From two expressions, the and operator creates a new expression consisting in the conjunction of the two original ones, that is 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:

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

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

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

is equivalent to:

(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, that is 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:

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

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