Использование запросов к функциям

Запросы к функциям CSS являются частью модуля условных правил CSS, который также определяет правило @media запроса к среде. Запросы к функциям работают аналогично запросам к среде. Разница заключается в том, что запрос к среде проверяет что-то об окружении, в котором работает веб-страница, в то время как запросы к функциям проверяют поддержку браузера функций CSS.

Запрос к функции состоит из правила @supports с последующим условием поддержки или функцией supports() и параметром объявления внутри объявления правила @import:

/* `@supports` at-rule */
@supports <support-condition> {
  CSS rules to apply
}

/* `supports()` function */
@import url_to_import supports(<declaration>);

Например, мы можем применить набор стилей или импортировать весь стилевой лист, если пользовательский агент поддерживает red в качестве допустимого значения для свойства CSS color:

/* `@supports` at-rule */
@supports (color: red) {
  CSS rules to apply
}

/* `supports()` function */
@import `/css/styles.css` supports(color: red);

В качестве ещё одного примера, если вы хотите проверить, поддерживает ли браузер свойство row-gap, вы напишете следующий запрос к функции. В большинстве случаев значение не имеет значения: если вам нужно только проверить, поддерживает ли браузер это свойство, то любое допустимое значение подойдет.

<div class="box">
  If your browser supports the row-gap property, the border will be dashed and
  text will be red.
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  border: 4px solid blue;
  color: blue;
  padding: 1em;
}
@supports (row-gap: 10px) {
  .box {
    border: 4px dashed darkgreen;
    color: red;
  }
}

Часть значения пары «свойство-значение» имеет большее значение, если вы проверяете новые значения определённого свойства. Все браузеры поддерживают color: red: это относится к CSS1. Однако часто к свойствам CSS добавляются дополнительные значения, например, относительные цвета, которые могут не поддерживаться. Запросы к функциям позволяют проверять пары «свойство-значение», что означает, что мы можем обнаружить поддержку значений.

Продолжая пример свойства color, здесь мы проверяем, поддерживает ли браузер объявление color: AccentColor:

/* `@supports` at-rule */
@supports (color: AccentColor) {
  CSS rules to apply
}

/* `supports()` function */
@import `/css/styles.css` supports(color: AccentColor);

В этих примерах мы использовали запросы к функциям для проверки того, поддерживает ли пользовательский агент определённое значение свойства CSS, перечисляя единственное объявление в скобках. Вы можете проверять несколько значений свойств или отсутствие поддержки.

Помимо запроса к браузеру о поддержке функции, вы можете проверить обратное, добавив ключевое слово not:

/* `@supports` at-rule with `not` */
@supports not (property: value) {
  CSS rules to apply
}

CSS внутри следующего запроса к функции выполнится, если браузер не поддерживает row-gap.

<div class="box">
  If your browser does not support row-gap, the content will be darkgreen with a
  dashed border.
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  border: 4px solid blue;
  color: blue;
  padding: 1em;
}
@supports not (row-gap: 10px) {
  .box {
    border: 4px dashed darkgreen;
    color: darkgreen;
  }
}

Возможно, вам потребуется проверить поддержку нескольких свойств в запросе к функции. Для этого вы можете включить список функций для проверки, разделённых ключевыми словами and:

/* multiple feature `@supports` at-rule */
@supports (property1: value) and (property2: value) {
  CSS rules to apply
}

Например, если для выполнения желаемого CSS требуется, чтобы браузер поддерживал CSS Shapes и CSS grid, вы можете создать правило, проверяющее поддержку браузера обеих этих функций. Следующее правило вернёт true только в том случае, если shape-outside: circle() и display: grid оба поддерживаются браузером.

<div class="box">
  If your browser supports <code>display: grid</code> and
  <code>shape-outside: circle()</code>, the content will be darkgreen with a
  dashed border.
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  border: 4px solid blue;
  color: blue;
  padding: 1em;
}
@supports (display: grid) and (shape-outside: circle()) {
  .box {
    border: 4px dashed darkgreen;
    color: darkgreen;
  }
}

Вы также можете использовать or для применения CSS только в том случае, если поддерживается одно или несколько объявлений:

/* any feature `@supports` at-rule */
@supports (property1: value) or (property2: value) {
  CSS rules to apply
}

Это особенно полезно, если функция имеет вендорные префиксы, так как вы можете проверить стандартное свойство плюс все вендорные префиксы.

<div class="box">
  The text and border will be green if your browser supports font smoothing.
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  border: 4px solid blue;
  color: blue;
  padding: 1em;
}
@supports (font-smooth: always) or (-webkit-font-smoothing: antialiased) {
  .box {
    border: 4px dashed darkgreen;
    color: darkgreen;
  }
}

Запросы к функциям не ограничиваются парами «свойство-значение». Вы можете использовать функции font-tech(), font-format() и selector() в запросах к функциям для выборочного применения CSS в зависимости от того, поддерживает ли пользовательский агент определённую технологию шрифтов, формат шрифтов или синтаксис селекторов соответственно.

Например, функция selector() может использоваться для импорта стилевого листа для браузеров, которые поддерживают вендорный префикс псевдоэлемента:

/* A `selector()` query within a `supports()` function */
@import `/css/webkitShadowStyles.css`
  supports(selector(::-webkit-inner-spin-button));

В этом примере мы проверяем, поддерживает ли браузер AccentColor <system-color> и используем display: none для изменения сообщения по умолчанию «не поддерживается» на «поддерживается», если тип цвета поддерживается.

HTML

<p class="accentcolor">
  Your browser does <span>not</span> support <code>AccentColor</code> as a color
  value.
</p>

CSS

body {
  font: 1.2em / 1.5 sans-serif;
}
p {
  padding: 1em;
}
@supports (color: AccentColor) {
  p {
    color: green;
    border: 2px solid;
  }
  span {
    display: none;
  }
}
@supports not (color: AccentColor) {
  p {
    color: red;
  }
}

Результат

Правило @supports проверяет, могут ли браузеры проанализировать одну или несколько пар «свойство/значение», и, следовательно, заявляют ли они о поддержке соответствующей функции(й). Если браузер понимает пары «свойство/значение», он возвращает положительный ответ. Запросы к функциям проверяют, считаются ли объявления допустимыми браузером, но не могут использоваться для проверки того, поддерживает ли он функцию должным образом без ошибок или нарушений спецификации. Запросы к функциям не могут проверять *частичную реализацию*.

Запросы к функциям — полезный инструмент для поэтапного улучшения сайта. Они позволяют предоставить хорошее решение для всех браузеров и улучшенное решение для браузеров, которые поддерживают более новые свойства и значения.

Вам не нужно использовать запросы к функциям, чтобы начать использовать новые функции CSS; обработка ошибок CSS означает, что браузер просто игнорирует CSS, который он ещё не распознаёт. Однако запросы к функциям — полезная альтернатива объявлениям по умолчанию и позволяют написать код один раз, который в конечном итоге будет поддерживаться везде.

• Модуль условных правил CSS
• Использование запросов к среде CSS
• Поддержка старых браузеров: запросы к функциям
• Обнаружение функций браузера: CSS @supports