Príkaz supports

Príkaz @supports nastavuje štýl prvkom s ohľadom na možnosti, ktoré prehliadač podporuje. V tomto príkaze je možné vytvárať podmienky pomocou logických operátorov not, and, or.

Syntax

css@supports podmienka {
  
}

Príklad

Nastavme podmienku, že ak váš prehliadač podporuje vlastnosť display s hodnotou flex, zobrazí sa iba odsek s príslušným textom, pričom farba jeho písma bude modrá:

html<p class="yes">Váš prehliadač podporuje display: flex.</p>
<p class="no">Váš prehliadač nepodporuje display: flex.</p>

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

Результат:

Pozri tiež