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

css@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:

html<p class="yes">Il tuo browser supporta display: flex.</p>
<p class="no">Il tuo browser non supporta display: flex.</p>

css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

Vedi anche