CSS-ат-правило `@supports`

@supports CSS ат-правило позволяет задавать объявления CSS, применение которых зависит от поддержки браузером функций CSS. Использование этого ат-правила обычно называют запросом функции. Правило необходимо размещать на верхнем уровне кода или вкладывать в любое другое условное групповое ат-правило.

В JavaScript к @supports можно получить доступ через интерфейс объектной модели CSS CSSSupportsRule.

Попробуйте

.flex-container > * {
  padding: 0.3em;
  list-style-type: none;
  text-shadow: 0 0 2px red;
  float: left;
}

@supports (display: flex) {
  .flex-container > * {
    text-shadow: 0 0 2px blue;
    float: none;
  }

  .flex-container {
    display: flex;
  }
}

<ul class="flex-container">
  <li><a href="#">Index</a></li>
  <li><a href="#">About me</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Синтаксис

@supports (<supports-condition>) {
  /* If the condition is true, use the CSS in this block. */
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

Ат-правило @supports состоит из блока инструкций с условием поддержки. Условия можно объединять с помощью конъюнкций (and), дизъюнкций (or) и/или отрицаний (not). Приоритет операторов можно задавать с помощью скобок.

В условиях поддержки можно использовать синтаксис <property>: <value> для объявления или синтаксис <function()>. В следующих разделах описано использование каждого типа условий поддержки.

Синтаксис объявления

Синтаксис объявления проверяет, поддерживает ли браузер указанное объявление <property>: <value>. Объявление необходимо заключить в скобки. Следующий пример возвращает true, если браузер поддерживает выражение transform-origin: 5% 5%:

@supports (transform-origin: 5% 5%) {
}

Синтаксис функции

Синтаксис функции проверяет, поддерживает ли браузер значения или выражения внутри функции. Функции, поддерживаемые в этом синтаксисе, описаны в следующих разделах.

at-rule()

Эта функция проверяет, поддерживает ли браузер указанное ат-правило. Следующий пример возвращает true и применяет содержащиеся в нём стили CSS, если браузер поддерживает ат-правило @keyframes:

@supports at-rule(@keyframes) {
}

selector()

Эта функция проверяет, поддерживает ли браузер указанный синтаксис селектора. Следующий пример возвращает true и применяет содержащиеся в нём стили CSS, если браузер поддерживает комбинатор дочерних элементов:

@supports selector(h2 > p) {
}

font-tech()

Эта функция проверяет, поддерживает ли браузер указанную технологию шрифтов для компоновки и отображения. Следующий пример возвращает true и применяет содержащиеся в нём стили CSS, если браузер поддерживает технологию шрифтов COLRv1:

@supports font-tech(color-COLRv1) {
}

В таблице ниже описаны технологии шрифтов (<font-tech>), включая технологии цветных шрифтов (<color-font-tech>), технологии функций шрифтов (<font-features-tech>) и другие доступные технологии шрифтов, которые можно проверить с помощью функции font-tech():

font-format()

Эта функция проверяет, поддерживает ли браузер указанный формат шрифта для компоновки и отображения. Следующий пример возвращает true и применяет содержащиеся в нём стили CSS, если браузер поддерживает формат шрифта opentype:

@supports font-format(opentype) {
}

В следующей таблице описаны доступные форматы (значения <font-format>), которые можно проверить с помощью этой функции:

Оператор not

Оператор not предшествует выражению и приводит к отрицанию этого выражения. Следующее условие возвращает true, если свойство transform-origin браузера считает 10em 10em 10em недопустимым:

@supports not (transform-origin: 10em 10em 10em) {
}

Как и любой оператор, оператор not можно применять к объявлению любой сложности. Следующие примеры корректны:

@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}

Оператор and

Оператор and создаёт новое выражение, представляющее собой конъюнкцию двух более коротких выражений. Он возвращает true, только если оба коротких выражения также истинны. Следующий пример возвращает true только в том случае, если оба коротких выражения истинны одновременно:

@supports (display: table-cell) and (display: list-item) {
}

Несколько конъюнкций можно записать подряд без дополнительных скобок. Следующие варианты эквивалентны:

@supports (display: table-cell) and (display: list-item) and (display: contents) {
}
@supports (display: table-cell) and
  ((display: list-item) and (display: contents)) {
}

Оператор or

Оператор or создаёт новое выражение, представляющее собой дизъюнкцию двух более коротких выражений. Он возвращает true, если истинно одно или оба коротких выражения. Следующий пример возвращает true, если истинно хотя бы одно из двух коротких выражений:

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}

Несколько дизъюнкций можно записать подряд без дополнительных скобок. Следующие варианты эквивалентны:

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
  (-webkit-transform-style: preserve) {
}

@supports (transform-style: preserve-3d) or
  (
    (-moz-transform-style: preserve-3d) or
      (-webkit-transform-style: preserve-3d)
  ) {
}

Формальный синтаксис

Примеры

Проверка поддержки свойства CSS

@supports (animation-name: test) {
  /* CSS applied when animations are supported without a prefix */
  @keyframes {
    /* Other at-rules can be nested inside */
  }
}

Проверка поддержки заданного свойства CSS или его версии с префиксом

@supports (text-stroke: 10px) or (-webkit-text-stroke: 10px) {
  /* CSS applied when text-stroke, prefixed or not, is supported */
}

Проверка отсутствия поддержки определённого свойства CSS

@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
  /* CSS to provide fallback alternative for text-align-last: justify */
}

Проверка поддержки селектора

Условные правила CSS позволяют проверять поддержку селектора, например :has().

/* This rule won't be applied in browsers that don't support :has() */
ul:has(> li li) {
  /* CSS is applied when the :has(…) pseudo-class is supported */
}

@supports not selector(:has(a, b)) {
  /* Fallback for when :has() is unsupported */
  ul > li,
  ol > li {
    /* The above expanded for browsers that don't support :has(…) */
  }
}

/* Note: So far, there's no browser that supports the `of` argument of :nth-child(…) */
@supports selector(:nth-child(1n of a, b)) {
  /* This rule needs to be inside the @supports block, otherwise
     it will be partially applied in browsers which don't support
     the `of` argument of :nth-child(…) */
  :is(:nth-child(1n of ul, ol) a, details > summary) {
    /* CSS applied when the :is(…) selector and
       the `of` argument of :nth-child(…) are both supported */
  }
}

Проверка поддержки технологии шрифтов

Следующий пример применяет цветной шрифт Bungee Spice, если браузер поддерживает технологию шрифтов COLRv1:

@supports font-tech(color-COLRv1) {
  body {
    font-family: "Bungee Spice", fantasy;
  }
}

Поддержку технологии шрифтов также можно проверить с помощью функции tech внутри ат-правила @font-face. В следующем примере, если браузер не поддерживает технологию цветных шрифтов в шрифте bungee-spice.woff2, вместо него будет использоваться обычный шрифт bungee.woff2.

@font-face {
  font-family: "Bungee Spice";
  src:
    url("bungee-spice.woff2") tech(color-COLRv1) format("woff2"),
    url("bungee.woff2") format("woff2");
}

Проверка поддержки формата шрифта

В следующем примере используется версия шрифта WOFF2, если браузер поддерживает этот формат; в противном случае используется указанная ранее версия WOFF:

@font-face {
  font-family: "Open Sans WOFF";
  src: url("open-sans.woff") format("woff");
}

@font-face {
  font-family: "Open Sans WOFF2";
  src: url("open-sans.woff2") format("woff2");
}

body {
  font-family: "Open Sans WOFF", sans-serif;
}

@supports font-format(woff2) {
  body {
    font-family: "Open Sans WOFF2", sans-serif;
  }
}

Однако более эффективный способ указать несколько форматов шрифта — перечислить их в дескрипторе src единственного ат-правила @font-face, расположив их в порядке от наиболее предпочтительного формата к наименее предпочтительному:

@font-face {
  font-family: "Open Sans";
  src:
    url("open-sans.woff2") format("woff2"),
    url("open-sans.woff") format("woff");
}

body {
  font-family: "Open Sans", sans-serif;
}

Проверка поддержки ат-правила

Следующий пример применяет набор стилей цветовой схемы с ограниченной областью действия, если браузер поддерживает ат-правило @scope:

@supports at-rule(@scope) {
  @scope (.light-scheme) {
    :scope {
      background-color: plum;
    }

    a {
      color: darkmagenta;
    }
  }

  @scope (.dark-scheme) {
    :scope {
      background-color: darkmagenta;
      color: antiquewhite;
    }

    a {
      color: plum;
    }
  }
}

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

Совместимость с браузерами

См. также

• Использование запросов функций
• Функции CSS-ат-правил
• CSSSupportsRule
• метод CSS.supports()