Команда supports

Команда @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,
которая задает приоритет стиля