CSS :: Правило @supports

css-правило @supports (от англ. support – поддержка) позволяет проверить, поддерживает браузер ту или иную css-технологию или нет.

Синтаксис

@supports (<условие>) {<стилевые правила>}

Значения

В качестве условия в круглых скобках записывается проверяемое css-свойство и его значение. Если оно не поддерживается браузером, стилевые правила в фигурных скобках будут проигнорированы.

Для составления более сложных условий могут быть использованы следующие логические операторы:

not – ставится перед условием. При этом, если свойство в условии не поддерживается браузером, стилевые правила в фигурных скобках будут использоваться.
and – объединяет несколько условий. Если хотя бы одно из свойств в условиях не поддерживается браузером, стилевые правила в фигурных скобках будут проигнорированы.
or – если поддерживается хотя бы одно из свойств в условиях, то стилевые правила в фигурных скобках будут использоваться.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-conditional-3/#at-supports

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/@supports

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<title>Пример №1</title>

<style>

	p{
	width: 400px;
	padding: 1em;
	border: 1px solid black;
	}

	@supports (color: green){
		.green_text{color: green}
	}

	@supports not (color: superYellow){
		.orange_text{color: orange}
	}

</style>

</head>
<body>

	<p class="green_text">
		Ваш браузер поддерживает color: green! 
	</p>
	
	<p class="orange_text">
		Ваш браузер не поддерживает color: superYellow, 
		поэтому использовано color: orange.
	</p>

</body>
</html>

Пример №1