Bert Bos | CSS tutorial – conditional rules
Transitions
The module defines:
@media
(but not the Media Queries)
@supports
API for @media and @supports
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
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
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))
UAs that do not know
@supports
itself will of course skip the whole at-rule…