Komanda supports

Komanda @supports nustato stilių elementams atsižvelgiant į naršyklės palaikomas galimybes. Šioje komandoje galima kurti sąlygas naudojant loginius operatorius not, and, or.

Sintaksė

css@supports sąlyga {
  
}

Pavyzdys

Sukurkime sąlygą, kad jei jūsų naršyklė palaiko savybę display su reikšme flex, bus rodoma tik atitinkamo teksto pastraipa, o jos šrifto spalva bus melsva:

html<p class="yes">Jūsų naršyklė palaiko display: flex.</p>
<p class="no">Jūsų naršyklė nepalaiko display: flex.</p>

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

Результат:

Taip pat žiūrėkite