CSS @supports

What is CSS @supports

Syntax for @supports

The syntax of the @supports rule is as follows:

@supports (condition) {
CSS code block;
} 

A condition is a CSS property or property value used to check whether certain CSS features are supported. The CSS code block is the style applied when the condition is met.

@supports Usage Example

Here is an example of @supports usage:

@supports (display: flex) {
.container {
display: flex;
} 
} 

In this example, we check whether the current browser supports the display: flex property value. If so, we apply the display: flex property to the .container style.

@supports Supports Logical Operators

@supports supports logical operators (and, or, not), allowing us to chain multiple conditions within a conditional.

Here’s an example using logical operators:

@supports (display: grid) and (not (display: flex)) {
.container {
display: grid;
}
} 

In this example, we check whether the current browser supports both display: grid and does not support display: flex. If both conditions are met, the display: grid property of the .container style is applied.

@supports value can be an expression

@supports condition can also be an expression. We can use comparison operators to compare with numbers, strings, or variables.

Here’s an example using an expression:

@supports (width > 600px) {
.container {
width: 800px;
}
}

In this example, we check if the current browser width is greater than 600 pixels. If so, we apply a style to the .container with a width of 800 pixels.

Nesting @supports

@supports also supports nested usage, meaning you can nest one @supports rule block within another.

Here’s an example of nested usage:

@supports (display: grid) {
@supports (not (display: flex)) {
.container {
display: grid;
}
}
}

In this example, we first check whether the current browser supports display: grid, and then check whether it doesn’t support display: flex. If both conditions are met, the display: grid style of .container is applied.

@supports Compatibility

@supports is currently widely supported by all major browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. However, @supports may not be supported in some older browser versions.

We can use the following code to check whether a browser supports @supports:

@supports not (display: flex) {
body::after {
content: 'Your browser does not support @supports!';
color: red;
}
}

In this code, we use not (display: flex) to check whether the browser does not support display: flex. If not, a red text warning is inserted at the end of the page.

Summary

CSS @supports is a very convenient feature that allows you to dynamically apply styles based on browser capabilities. You can define conditions using attributes and values, logical operators, and expressions. Nesting @supports provides even more flexible control over the conditions under which styles are applied.

While @supports is widely supported in modern browsers, we should still use it with caution, as some older browsers may not support it. Of course, we can provide alternative styles through graceful degradation.

When using @supports, it’s best to consult a browser compatibility table or query tool to determine whether specific features are supported to ensure that your styles display properly and adapt to different browsers.