Правило @supports в CSS

Определение и использование

CSS @supports Правила используются для тестирования поддержки браузером определенной CSS функции и для определения резервных стилей при不支持.

Пример

Если браузер поддерживает display: grid, применяется @supports CSS в правилах. Если поддержка отсутствует, применяется @supports Стили класса .container вне правил:

/* Если браузер не поддерживает display: grid, используйте этот CSS */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* Если браузер поддерживает display: grid, используйте этот CSS */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

Попробуйте сами

синтаксис CSS

@supports (supports-condition) {
  /* Если условие истинно, примените этот CSS */
}

Значение свойства

Значение Описание
supports-condition

Условия определяются в виде пары «имя-значение» (property: value) или синтаксисом function().

Условия можно комбинировать с помощью and, or или not.
selector()

является синтаксисом function(). Проверяет, поддерживает ли браузер указанный синтаксис селектора.

Например, @supports selector(h2 > p) возвращает true и применяет CSS стили, если браузер поддерживает подселекторы.
font-tech()

является синтаксисом function(). Проверяет, поддерживает ли браузер указанную технологию шрифта.

Например, @supports font-tech(color-svg) возвращает true и применяет CSS стили, если браузер поддерживает многоцветные таблицы SVG.
font-format()

является синтаксисом function(). Проверяет, поддерживает ли браузер указанный формат шрифта.

Например, @supports font-format(woff) возвращает true и применяет CSS стили, если браузер поддерживает WOFF 1.0.

Поддержка браузерами

Числа в таблице показывают версию первого браузера, который полностью поддерживает это @ правило.

@ правила Chrome Edge Firefox Safari Opera
@supports 28 12 22 9 12.1
font-format() 108 108 106 17 94
font-tech() 108 108 106 17 94
selector() 83 83 69 14.1 69