The supports command
The @supports command styles elements
based on the features supported by the browser. In
this command you can create conditions using
logical operators not, and,
or.
Syntax
@supports condition {
}
Example
Let's set the condition that if your browser
supports the display property with
the flex value, then only the paragraph
with the corresponding text will be displayed,
and its font color will be blue:
<p class="yes">Your browser support display: flex.</p>
<p class="no">Your browser does not support display: flex.</p>
@supports (display: flex) {
.no {
display: none;
}
p {
color: #467CBC;
}
}
@supports not (display: flex) {
.yes {
display: none;
}
}
:
See also
-
the
@importcommand
that imports a CSS file -
the
@mediacommand
that specifies a style for a media type -
the
!importantflag
that sets a style precedence
