Reguła supports

Reguła @supports definiuje styl elementów z uwzględnieniem funkcjonalności obsługiwanych przez przeglądarkę. W tej regule można tworzyć warunki za pomocą operatorów logicznych not, and, or.

Składnia

css@supports warunek {
  
}

Przykład

Ustalmy warunek, że jeśli twoja przeglądarka obsługuje właściwość display z wartością flex, to wyświetli się tylko akapit z odpowiednim tekstem, przy czym kolor jego czcionki będzie niebieski:

html<p class="yes">Twoja przeglądarka obsługuje display: flex.</p>
<p class="no">Twoja przeglądarka nie obsługuje display: flex.</p>

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

Результат:

Zobacz też