supports at-rule

The @supports at-rule styles elements based on the features supported by the browser. In this at-rule you can create conditions using logical operators not, and, or.

Syntax

@supports condition {
	
}

Example

Let's set the condition that if your browser supports the display property with the flex value, then only the paragraph with the corresponding text will be displayed, and its font color will be blue:

<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;
	}
}

supports at-rule

Syntax

Example

See also