@supports
Правило @supports позволяет проверить, поддерживает браузер ту или иную возможность, и на основе этого создать набор стилевых правил. Допустимо создавать комплексные условия с помощью логических операторов not, and, or.
Синтаксис
@supports <условие> {
<стилевые правила>
}Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
В качестве условия в круглых скобках пишется стилевое свойство и его значение. Далее в фигурных скобках идут стилевые правила. Если браузер поддерживает указанное свойство, то применяются заданные стилевые правила, в противном случае они игнорируются.
@supports (transform: perspective(300px)) {
/* Браузер поддерживает свойство transform с функцией perspective() */
}Для проверки того, что свойство не поддерживается применяется логический оператор not, он ставится перед условием.
@supports not (transform: perspective(300px)) {
/* Браузер НЕ поддерживает свойство transform с функцией perspective() */
}Объединить несколько условий можно через логический оператор and. Если хотя бы одно из условий не поддерживается, то стилевые правила не применяются.
@supports (transform-origin: 50% 100%) and (transform: perspective(300px)) {
/* Браузер одновременно поддерживает свойства transform-origin И
transform с функцией perspective() */
}Для выбора одного из условий используется логический оператор or. Если поддерживается хотя бы одно из условий, то применяются стилевые правила.
@supports (perspective: 300px) or (transform: perspective(300px)) {
/* Браузер поддерживает свойство perspective ИЛИ
свойство transform с функцией perspective() */
}Пример
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Conditional Rules Module Level 3 | Возможная рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 12 | 28 | 12.1 | 9 | 22 |
| 4.4 | 22 | 37 | 9.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.