Komento supports

Komento @supports asettaa tyylin elementeille ottaen huomioon selaimen tukemat toiminnot. Tässä komennossa voidaan luoda ehtoja käyttämällä logiikkaoperaattoreita not, and, or.

Syntaksi

css@supports ehto {
  
}

Esimerkki

Asetetaan ehto, että jos selaimesi tukee ominaisuutta display arvolla flex, näytetään vain kappale vastaavalla tekstillä, ja sen fontin väri on sinisen värinen:

html<p class="yes">Selaimesi tukee display: flex.</p>
<p class="no">Selaimesi ei tue display: flex.</p>

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

Результат:

Katso myös