@supports

Правило @supports позволяет проверить, поддерживает браузер ту или иную возможность, и на основе этого создать набор стилевых правил. Допустимо создавать комплексные условия с помощью логических операторов not, and, or.

Синтаксис

@supports <условие> {
  <стилевые правила>
}

Значения

В качестве условия в круглых скобках пишется стилевое свойство и его значение. Далее в фигурных скобках идут стилевые правила. Если браузер поддерживает указанное свойство, то применяются заданные стилевые правила, в противном случае они игнорируются.

@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() */
}

Пример

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

Браузеры