Bert Bos | CSS tutorial – conditional rules

Conditional rules


Conditional rules

The module defines:

Syntax 1

Test for a supported property and value

@supports ( display: flex ) {
  body, #navigation, #content { display: flex }
  #navigation { color: gray }

The rules are only applied by a UA that knows the property display and the value flex

Syntax 2

Test voor a property or value that is not supported

@supports not ( display: flex ) {
  body, #navigation, #content { display: box }

The rules are applied by a UA that does not know the property display or the value flex

UAs that do not know @supports itself will of course skip the whole at-rule…

Syntax 3

Combinations with AND and OR

@supports (display: outside) or
    (color: hsl(0,100%,100%)) {...}
@supports (display: outside) and
    (color: hsl(0,100%,100%)) {...}

AND, OR and NOT can be combined arbitrarily, but only with explicit parentheses:

((color: red) or (color: #f00)) and
 ((margin: auto) or (padding: auto))


From the demo:

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