Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

@supports

To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

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

Specyfikacja Status Komentarz
CSS Conditional Rules Module Level 3
The definition of '@supports' in that specification.
Candidate Recommendation Initial definition.

Zgodność z przeglądarką

Cecha Chrome Firefox (Gecko) Internet Explorer Opera Safari
Podstawowe wsparcie 28.0 22 (22) [1] Not supported 12.1 Not supported
Cecha Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Podstawowe wsparcie Not supported 22.0 (22) [1] Not supported 12.1 Not supported

[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ż

Autorzy i etykiety dokumentu

 Autorzy tej strony: fscholz, kamil09875, P0lip
 Ostatnia aktualizacja: fscholz,