Die @supports-opdrag

Die opdrag @supports wys 'n styl vir elemente met inagneming van die funksies wat deur die blaaier ondersteun word. In hierdie opdrag kan voorwaardes geskep word met behulp van logiese operateurs not, and, or.

Sintaksis

css@supports voorwaarde {
  
}

Voorbeeld

Kom ons stel 'n voorwaarde dat indien jou blaaier die eienskap display met die waarde flex ondersteun, slegs die paragraaf met die ooreenstemmende teks vertoon sal word, terwyl die kleur van sy font blou sal wees:

html<p class="yes">Jou blaaier ondersteun display: flex.</p>
<p class="no">Jou blaaier ondersteun nie display: flex nie.</p>

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

Результат:

Sien ook