Pravilo supports

Pravilo @supports določa slog elementom glede na zmožnosti, ki jih podpira brskalnik. V tem pravilu lahko ustvarjate pogoje z uporabo logičnih operatorjev not, and, or.

Sintaksa

css@supports pogoj {
  
}

Primer

Nastavimo pogoj: če vaš brskalnik podpira lastnost display z vrednostjo flex, se bo prikazal samo odstavek z ustreznim besedilom, barva pisave pa bo modra:

html<p class="yes">Your browser support display: flex.</p>
<p class="no">Your browser does not support display: flex.</p>

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

Результат:

Glejte tudi