@supports-reglen
Reglen @supports definerer styling for elementer baseret på
funktioner, som browseren understøtter.
I denne regel kan du oprette betingelser ved hjælp af
logiske operatorer not,
and, or.
Syntaks
@supports betingelse {
}
Eksempel
Lad os definere en betingelse om, at hvis din browser understøtter
egenskaben display med værdien flex,
vises kun afsnittet med
den tilsvarende tekst, og skriftfarven
vil være lyseblå:
<p class="yes">Din browser understøtter display: flex.</p>
<p class="no">Din browser understøtter ikke display: flex.</p>
@supports (display: flex) {
.no {
display: none;
}
p {
color: #467CBC;
}
}
@supports not (display: flex) {
.yes {
display: none;
}
}
:
Se også
-
reglen
@import,
som importerer en CSS-fil -
reglen
@media,
som definerer styling for en mediatype -
reglen
!important,
som definerer prioritet for styling
