@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.

* Some parts of this feature may have varying levels of support.

Описание

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>

<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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@supports
font-format()
font-tech()
selector()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

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

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