Page 149 - CSS
P. 149
Chapter 22: Feature Queries
Syntax
• @supports [condition] { /* CSS rules to apply */ }
Parameters
Parameter Details
(property: Evaluates true if the browser can handle the CSS rule. The parenthesis
value) around the rule are required.
and Returns true only if both the previous and next conditions are true.
not Negates the next condition
or Returns true if either the previous or next condition is true.
(...) Groups conditions
Remarks
Feature detection using @supports is supported in Edge, Chrome, Firefox, Opera, and Safari 9 and
up.
Examples
Basic @supports usage
@supports (display: flex) {
/* Flexbox is available, so use it */
.my-container {
display: flex;
}
}
In terms of syntax, @supports is very similar to @media, but instead of detecting screen size and
orientation, @supports will detect whether the browser can handle a given CSS rule.
Rather than doing something like @supports (flex), notice that the rule is @supports (display: flex)
.
Chaining feature detections
https://riptutorial.com/ 127
