Команда supports - стиль элементов с возможностями, которые поддерживаются браузером в CSS
Команда @supports задает стиль элементам с учетом
возможностей, поддерживаемых браузером.
В данной команде можно создавать условия с помощью
логических операторов not,
and, or.
Синтаксис
@supports условие {
}
Пример
Давайте зададим условие, что если ваш браузер поддерживает
свойство display со значением flex,
то отобразится только абзац с
соответствующим текстом, при этом цвет его шрифта
будет голубого цвета:
<p class="yes">Your browser support display: flex.</p>
<p class="no">Your browser does not support display: flex.</p>
@supports (display: flex) {
.no {
display: none;
}
p {
color: #467CBC;
}
}
@supports not (display: flex) {
.yes {
display: none;
}
}
:
Смотрите также
-
команда
@import,
которая импортирует CSS-файл -
команда
@media,
которая задает стиль для типа носителя -
команда
!important,
которая задает приоритет стиля