Web.QHMIT.com

CSS @supports At-Rule

The CSS @supports at-rule tests whether or not the user agent supports a given property:value pair. In other words, it allows you to do feature detection right from your style sheet.

Using the @supports at-rule allows you to apply styles only if the user agent/browser supports them. This is referred to as a feature query, as it is a query for a certain feature.

The @supports rule is similar to the @media rule (which tests for media types and media features), but the @supports rule tests specifically for CSS features.

Here's an example:

Using this example, the body element will use display: flex only on user agents/browsers that support the display property with a value of flex.

The not Operator

You can also use the not operator to provide styles for browsers that don't support the given feature.

Like this:

The and Operator

You can use the and operator to test for multiple property:value combinations.

Here's an example:

This can also be negated with the not operator if required:

The or Operator

You can use the or operator to test for multiple alternative property:value combinations.

This can be useful when testing for browser prefixes.

Here's an example:

Combining Operators

You can also combine operators for a more complex feature query. However, if you mix and, or, or not, you'll need to use an extra layer of parentheses, so that there's no confusion over precedence rules.

Therefore, the following code is not valid:

The above is invalid because it's not clear whether the or refers to both of the last two features or only the second feature.

Therefore, it would need to be re-written to one of the following.

Or:

Official Specifications