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 (...)) { /*  ...  */ }
Поддержка браузерами
chrome
Chrome
28
firefox
Firefox
22
internet explorer
IE
 
edge
Edge
12
safari
Safari
9
opera
Opera
12