Reguła supports
Reguła @supports definiuje styl elementów z uwzględnieniem
funkcjonalności obsługiwanych przez przeglądarkę.
W tej regule można tworzyć warunki za pomocą
operatorów logicznych not,
and, or.
Składnia
@supports warunek {
}
Przykład
Ustalmy warunek, że jeśli twoja przeglądarka obsługuje
właściwość display z wartością flex,
to wyświetli się tylko akapit z
odpowiednim tekstem, przy czym kolor jego czcionki
będzie niebieski:
<p class="yes">Twoja przeglądarka obsługuje display: flex.</p>
<p class="no">Twoja przeglądarka nie obsługuje display: flex.</p>
@supports (display: flex) {
.no {
display: none;
}
p {
color: #467CBC;
}
}
@supports not (display: flex) {
.yes {
display: none;
}
}
:
Zobacz też
-
reguła
@import,
która importuje plik CSS -
reguła
@media,
która definiuje styl dla typu nośnika -
reguła
!important,
która definiuje priorytet stylu
