As its name suggests, conditional CSS refers to CSS rules that are applied when a condition is met. Conditional CSS consists of conditional grouping rules, and the rule sets nested within. A condition in this context may be a CSS property and value combination, as with the
@supports rule. A condition may test for a browser window condition such as width, as with the
@media rule. Or a condition may be a device feature such as hover state or pointer input, also as with
@media. We'll discuss all this in the chapter.
@supports are described by the CSS Conditional Rules Module, Level 3 specification. The
@media rule—which you probably know as media queries—is fully defined by the Media Queries ...