@supports

Podsumowanie

@supports CSS at-rule zawiera grupę reguł w bloku CSS zamkniętych w klamrowych nawiasach. Składa się z deklaracji CSS (klucz-para). Do wykorzstania mamy także warunkowość zdań: koniunkcję, alternatywę oraz negację. Powyższa reguła daje nam możliwość wykrycia dostępności danej reguły.

Istnieje możliwość użycia tej reguły na zewnątrz CSS conditional-group at-rule, uzyskując tym samym dostęp do kontrolowania jej przy użyciu obiektowego modelu interfejsu CSS CSSSupportsRule.
 

Składnia

@supports <wyrażenie> {
  /* reguły, które zostaną zaaplikowane w przypadku gdy wyrażenie jest prawdziwe */
}

Przykłady

Sprawdzanie wsparcia danej właściowści CSS

@supports (animation-name: test) {
    … /* reguły aplikowane gdy właściwość "animation-name" jest dostepna bez tzw. vendor prefixes, np. "-webkit-animation" */
    @keyframes { /* przykład użycia @supports na zewnątrz innej reguły @ */
      …
    }
}

Sprawdzanie wsparcia danej właściowści CSS wraz z przedrostkami

@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /* reguły aplikowane są dostępne, niezależnie czy przeglądarka obsługuje wersja z przedrostkami czy bez */
}

Sprawdzanie czy przeglądarka nie obsługuje danej właściwości

@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
   /* aplikowane reguły, jeśli powyższe wyrażenie jest prawdziwe */
}

Specyfikacje

Zgodność z przeglądarką

[1] Gecko 17 do Gecko 21 wspierał tą cechę tylko gdy użytkownik włączył ją ustawiając wartość  layout.css.supports-rule.enabled na true.

Zobacz też

• The CSSOM class CSSSupportsRule, and the CSS.supports method that allows to perform the same check via JavaScript.