@supports komanda

Komanda @supports norāda stilu elementiem, ņemot vērā pārlūkprogrammas atbalstītās iespējas. Šajā komandā var izveidot nosacījumus, izmantojot loģiskos operatorus not, and, or.

Sintakse

css@supports nosacījums {
  
}

Piemērs

Izveidosim nosacījumu, ka, ja jūsu pārlūkprogramma atbalsta īpašību display ar vērtību flex, tiks parādīts tikai rindkopa ar atbilstošu tekstu, un teksta krāsa būs zilgana:

html<p class="yes">Jūsu pārlūkprogramma atbalsta display: flex.</p>
<p class="no">Jūsu pārlūkprogramma neatbalsta display: flex.</p>

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

Результат:

Skatiet arī