La regola supports
La regola @supports definisce lo stile per gli elementi in base
alle funzionalità supportate dal browser.
All'interno di questa regola è possibile creare condizioni utilizzando
gli operatori logici not,
and, or.
Sintassi
@supports condizione {
}
Esempio
Impostiamo una condizione: se il tuo browser supporta
la proprietà display con il valore flex,
verrà visualizzato solo il paragrafo con
il testo corrispondente, e il colore del suo carattere
sarà blu:
<p class="yes">Il tuo browser supporta display: flex.</p>
<p class="no">Il tuo browser non supporta display: flex.</p>
@supports (display: flex) {
.no {
display: none;
}
p {
color: #467CBC;
}
}
@supports not (display: flex) {
.yes {
display: none;
}
}
:
Vedi anche
-
la regola
@import,
che importa un file CSS -
la regola
@media,
che definisce lo stile per il tipo di media -
la regola
!important,
che definisce la priorità dello stile
