@supports

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Описание

CSS @-правило @supports связывает набор вложенных правил в блоке CSS-кода, ограниченном фигурными скобками, с условием, представляющим собой одно или несколько проверочных объявлений в виде пар свойство: значение, объединенных операторами and, or или not (логические И, ИЛИ, НЕ). Такое условие называется supports-условием.

@supports позволяет CSS-коду выполнять feature query (запрос на проверку поддержки различных возможностей CSS в браузере).

Правило @supports может быть использовано не только на верхнем уровне вложенности CSS, но и внутри блоков любых других @-правил. Доступ к нему можно получить с помощью интерфейса объектной модели CSS CSSSupportsRule.

Синтаксис

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

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

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

css
( transform-origin: 5% 5% )

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

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

Оператор not

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

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

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

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

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

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

Оператор and

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

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

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

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

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

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

Оператор or

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

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

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

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

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

css
( 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-decl>  

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

<supports-decl> = 
  ( <declaration> )

Примеры

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

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

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

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

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

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

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

Specification
CSS Conditional Rules Module Level 4
# at-supports-ext
CSS Conditional Rules Module Level 3
# at-supports

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

BCD tables only load in the browser

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

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