@supports
Применяет правила, только если браузер поддерживает указанное свойство, значение или селектор.
Синтаксис
@supports (property: value) { … }Параметры
| Параметр | Тип | Описание |
|---|---|---|
| (property: value) | condition | Проверяемое объявление. |
| not | and | or | keyword | Сочетание условий. |
| selector() | function | Проверяет поддержку селектора. |
Примеры
Стили только там, где работает backdrop-filter:
<style>
.box { padding: 12px; background: lightgray; }
@supports (backdrop-filter: blur(4px)) {
.box { background: palegreen; }
.box::after { content: " — backdrop-filter is supported"; }
}
</style>
<div class="box">Check</div>Проверка селектора:
<style>
.msg::after { content: "no :has()"; color: crimson; }
@supports selector(:has(a)) {
.msg::after { content: ":has() is supported"; color: seagreen; }
}
</style>
<p class="msg"></p>Примечания
Это инструмент постепенного улучшения: напишите вариант, который работает везде, а затем улучшите его внутри @supports. Незнакомое свойство в обычном правиле браузер просто пропускает, поэтому @supports нужен, только когда несколько объявлений должны меняться вместе.
См. также
- @media — Применяет правила только при заданных условиях — ширине окна, теме системы и других.
- @container — Применяет правила в зависимости от размера контейнера, а не окна.
- backdrop-filter — Применяет фильтры ко всему, что находится за элементом, — эффект матового стекла.
Вопросы и ответы по теме
В учебнике
- Проверка поддержки: @supports — Правило @supports и запросы возможностей, условия not, and и or, проверка селекторов через selector() и прогрессивное улучшение.