@supports

Синтаксис

supports-условие состоит из одного или нескольких CSS-объявлений в сочетании с различными логическими операторами. Приоритет операторов может быть переопределён при помощи круглых скобок.

Синтаксис объявления

В простейшем случае, supports-условие представляет собой одно CSS-объявление, то есть, пару вида свойство: значение. Следующее выражение

( transform-origin: 5% 5% )

вернёт true, если transform-origin поддерживает синтаксис, в котором значение 5% 5% является допустимым.

CSS-объявление всегда заключается в круглые скобки.

Оператор not

Оператор not (логическое НЕ) может стоять перед любым выражением. not возвращает значение, противоположное тому, которое вернуло выражение в круглых скобках после not. Следующее выражение

not ( transform-origin: 10em 10em 10em )

вернёт true, если transform-origin не поддерживает синтаксис, в котором значение 10em 10em 10em является допустимым.

Как и другие операторы, not может быть применен к любому составному выражению. Следующие примеры являются синтаксически корректными:

not ( not ( transform-origin: 2px ) )
(display: flexbox) and ( not (display: inline-grid) )

Примечание: Нет необходимости заключать оператор not в круглые скобки на верхнем уровне вложенности. Однако, скобки обязательны, если not используается в сочетании с другими операторами (and или or).

Оператор and

Оператор and (логическое И или конъюнкция) объединяет два выражения и возвращает true тогда и только тогда, когда оба выражения истинны. В следующем примере всё выражение вернет true только в том случае, если оба выражения в круглых скобках одновременно истинны.

(display: table-cell) and (display: list-item)

В одном выражении может использоваться несколько операторов and; при этом нет необходимости использовать дополнительные круглые скобки. Так, выражение

(display: table-cell) and (display: list-item) and (display:run-in)

эквивалентно следующему:

(display: table-cell) and ((display: list-item) and (display:run-in))

Оператор or

Оператор or (логическое ИЛИ или дизъюнкция) объединяет два выражения и возвращает true, если истинно хотя бы одно из них. В следующем примере вся строка вернёт true, если хотя бы одно из выражений, заключенных в круглые скобки, истинно:

( transform-style: preserve ) or ( -moz-transform-style: preserve )

В одном выражении может использоваться несколько операторов or; при этом нет необходимости использовать дополнительные скобки. Так, выражение

( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )

эквивалентно следующему:

( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))

Примечание: если в выражении используются оба оператора, and и or, необходимо использовать скобки, чтобы указать порядок применения логических операторов. Если скобки не используются, выражение считается некорректным и всё правило @support будет полностью проигнорировано.

Формальный синтаксис

@supports = 
  @supports <supports-condition> { <rule-list> }  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

<supports-feature> = 
  <supports-selector-fn>     |
  <supports-font-tech-fn>    |
  <supports-font-format-fn>  |
  <supports-at-rule-fn>      |
  <supports-decl>            

<general-enclosed> = 
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]                 

<supports-selector-fn> = 
  selector( <complex-selector> )  

<supports-font-tech-fn> = 
  font-tech( <font-tech> )  

<supports-font-format-fn> = 
  font-format( <font-format> )  

<supports-at-rule-fn> = 
  at-rule( <at-keyword-token> )  

<supports-decl> = 
  ( <declaration> )  

<complex-selector> = 
  <complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*  

<font-tech> = 
  <font-features-tech>  |
  <color-font-tech>     |
  variations            |
  palettes              |
  incremental           

<font-format> = 
  <string>           |
  collection         |
  embedded-opentype  |
  opentype           |
  svg                |
  truetype           |
  woff               |
  woff2              

<complex-selector-unit> = 
  [ <compound-selector>? <pseudo-compound-selector>* ]!  

<combinator> = 
  '>'          |
  '+'          |
  '~'          |
  [ '|' '|' ]  

<font-features-tech> = 
  features-opentype  |
  features-aat       |
  features-graphite  

<color-font-tech> = 
  color-COLRv0  |
  color-COLRv1  |
  color-SVG     |
  color-sbix    |
  color-CBDT    

<compound-selector> = 
  [ <type-selector>? <subclass-selector>* ]!  

<pseudo-compound-selector> = 
  <pseudo-element-selector> <pseudo-class-selector>*  

<type-selector> = 
  <wq-name>         |
  <ns-prefix>? '*'  

<subclass-selector> = 
  <id-selector>            |
  <class-selector>         |
  <attribute-selector>     |
  <pseudo-class-selector>  

<pseudo-element-selector> = 
  : <pseudo-class-selector>         |
  <legacy-pseudo-element-selector>  

<pseudo-class-selector> = 
  : <ident-token>                   |
  : <function-token> <any-value> )  

<wq-name> = 
  <ns-prefix>? <ident-token>  

<ns-prefix> = 
  [ <ident-token> | '*' ]? '|'  

<id-selector> = 
  <hash-token>  

<class-selector> = 
  '.' <ident-token>  

<attribute-selector> = 
  '[' <wq-name> ']'                                   |
  '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'  

<legacy-pseudo-element-selector> = 
  : [ before | after | first-line | first-letter ]  

<attr-matcher> = 
  [ '~' | '|' | '^' | '$' | '*' ]? '='  

<attr-modifier> = 
  i  |
  s  

Примеры

Тестирование заданного свойства

@supports (animation-name: test) {
    … /* размещенные в этом блоке правила будут применены, если браузером поддерживаются свойства анимации без префиксов */
    @keyframes { /* @supports является условным правилом группировки, оно может содержать в себе другие @-правила */
      …
    }
}

Тестирование заданного свойства или его версии с префиксом

@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /* размещенные в этом блоке правила будут применены, если браузером поддерживаются свойства 3D трансформации, хотя бы с префиксами */
}

Тестирование неподдерживаемого или специфического свойства

@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* в этом блоке могут быть размещены CSS-правила, имитирующие правило `text-align-last: justify` */
}

Спецификации

Совместимость с браузерами

Смотрите также

• CSSOM-класс CSSSupportsRule, а также метод CSS.supports, позволяющий использовать @supports-проверки в JavaScript.