@supports

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

Правило @supports состоит из блока инструкций с условием supports. Условие supports — это набор одного или нескольких пар имя-значение (например, <property>: <value>).

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

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

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

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

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

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

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

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 предшествует выражению, результатом чего является отрицание выражения. Следующее возвращает 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 создаёт новое выражение из конъюнкции двух более коротких выражений. Он возвращает 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 создаёт новое выражение из дизъюнкции двух более коротких выражений. Он возвращает 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))) {}

@supports = 
  @supports <supports-condition> { <rule-list> }  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

<supports-feature> = 
  <supports-decl>  

<supports-decl> = 
  ( <declaration> )  

Условные правила 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 */
  }
}

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

@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice");

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

Также можно проверить поддержку технологии шрифтов, используя функцию tech внутри правила @font-face @font-face. Если браузер не поддерживает технологию, можно использовать резервный шрифт (Bungee-fallback.otf) .

@font-face {
  font-family: "Bungee Spice";
  src:
    url("https://fonts.googleapis.com/css2?family=Bungee+Spice")
      tech(color-COLRv1),
    url("Bungee-fallback.otf") format("opentype");
}

Следующий пример применяет стиль CSS, если браузер поддерживает формат шрифта woff2:

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

• Использование запросов функций
• Класс CSSOM CSSSupportsRule и метод CSS.supports(), которые позволяют выполнить ту же проверку через JavaScript.