CSS правило @supports позволяет вам выполнять обнаружение поддержки свойств в браузере прямо из вашей таблицы стилей, вместо того, чтобы прибегать к сторонним полифиллам (таким как Modernizr, например).
Используя @supports, вы выполняете проверку на поддержку свойства, а затем прописываете обычные правила CSS, помещенные внутри блока, которые отрабатывают в зависимости от того, пройдена ли проверка.
Официальный синтаксис правила:
@supports <supports_condition> {
/* стили CSS */
}, где <supports_condition> - проверка на поддержку свойства.
Поскольку правило @supports условное, то в отличие от большинства инструментов проверки свойств с помощью JavaScript, @supports требует указания свойства и значения. Например, простое объявление @supports выглядит так:
@supports (display: flex) {
.box {
display: flex;
align-items: center;
}
}В приведенном выше примере проверяется, поддерживает ли браузер свойство display со значением flex. Если поддерживается (т.е. если проверка пройдена), применятся стили, объявленные внутри блока @supports.
Ключевое слово not
Ровно так же, как вы проверяете, поддерживается ли свойство, вы можете проверить, не поддерживается ли свойство, используя оператор not. Например, можно объединить вышеуказанную проверку на поддержку Flexbox с другой, которая предоставляет альтернативные стили, если Flexbox не поддерживается.
@supports not (display: flex) {
.box {
display: table;
}
}Проверка с несколькими условиями
Вы можете проверить поддержку нескольких свойств в правиле @supports, используя операторы and и or.
Например, если определенное свойство поддерживается с префиксами в одних браузерах и без префиксов в других, вы можете проверить поддержку любого из вариантов. В примере ниже проверяется поддержка Flexbox, в том числе с учётом вендорных префиксов:
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
.box {
display: -webkit-flex;
display: -moz-flex;
display: flex;
}
}Вы также можете проверить поддержку двух свойств с помощью ключевого слова and. Например, вы можете проверить, поддерживает ли браузер 3D-transforms и transitions, чтобы создать какой-то трехмерный эффект:
@supports (transform: rotate3d(1, 1, 0, 90deg)) and (transition: transform 0.75s) {
/* стили для трёхмерного эффекта */
}Также можно комбинировать ключевые слова and и or в одном блоке @supports, чтобы выполнить проверку поддержки комбинации нескольких свойств.
Чтобы избежать путаницы, вызванной правилами приоритета, комбинировать and, or и not лучше с использованием круглых скобок. Это означает, что следующая запись может запутать и вообще не отработать:
@supports (transform: rotate3d(1, 1, 0, 90deg))
and (transition: transform 0.75s)
or (animation: my-animation 0.75s alternate forwards) {
/* ... */
}Правильней будет задать приоритет круглыми скобками (подобно другим языкам программирования):
@supports (transform: rotate3d(1, 1, 0, 90deg))
and ((transition: transform 0.75s) or (animation: my-animation 0.75s alternate forwards)) {
/* ... */
}Тонкости синтаксиса
Пробел обязателен после оператора not и с обеих сторон от and или or.
Проверяемое свойство всегда должно заключаться в круглые скобки, даже если это единственное, что есть в выражении. Например, следующая запись не отработает:
@supports display: flex {
/* ... */
}Синтаксис @supports позволяет использовать лишние круглые скобки. Эта гибкость иногда бывает полезна (например, при комментировании выражения). Например, вы можете написать:
@supports ((display: flex) /* - проверяет поддержду Flexbox */) {
/* ... */
}Если вы комбинируете оператор not с другими операторами, нет необходимости заключать not в скобки. Однако, если это не первое условие в проверке, они необходимы.
/* Валидно */
@supports not (...) and ((...) or (...)) { /* ... */ }
/* Не валидно */
@supports (...) or (...) not (...) { /* ... */ }
/* Валидно */
@supports (...) or (...) (not (...)) { /* ... */ }
Комментарии (0)