Conditional rules

●●●●●●

The module defines:

• @media (but not the Media Queries)

  • Device characteristics (see elsewhere)
  • Nothing new since level 2

• @supports

  • UA capabilities
  • Experimental

• API for @media and @supports

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

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))

Demo

●●●●●●

From the demo:

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