Feature queries in CSS allow you to test whether a particular feature is supported by the browser before applying styles that use that feature. This means that you can take advantage of the latest features and functionality, while still ensuring that your site looks good on older browsers and devices.
This is done by testing whether a particular CSS feature is supported by the browser, and then applying your styles based on that test. The syntax is similar to a media query, which allows you to apply styles based on the size of the screen (or other device properties). Instead of testing for device characteristics, however, we test for specific CSS features.
Here’s the basic syntax for a feature query:
@supports (property: value) {
/* Styles that use the property and value */
}
The @supports
rule is what is used to define a block of CSS that should only be applied if the browser supports the specified feature. Inside the block, you can use any properties and values that are supported by the feature you’re testing for.
For example, let’s say you want to use CSS Grid to create a layout with multiple columns. However, CSS Grid is not supported by all of the browsers in the requirements for your particular project. Using the @supports
rule, we can take a Progressive Enhancement approach to only apply the grid styles if the browser supports them and provide a sensible fallback for older browsers:
.container {
display: flex;
flex-wrap: wrap;
}
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
}
Here, the .container
element is first styled with display: flex
and flex-wrap: wrap
, which creates a responsive layout that works on all devices. Then, only in cases where supported, the ruleset within our @supports
block will override the previously defined ruleset that usesdisplay: flex
, providing a solid user experience for all users, while offering an enhanced experience for those using a more modern browser.
Note that CSS Grid and Flexbox both have very good browser support – they are just used here for the sake of example.
The not Operator
@supports
can be paired with a not
operator to check for features that are not supported by the browser.
We can rewrite the above CSS Grid example with the not
operator, as follows:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
@supports not (display: grid) {
.container {
display: flex;
flex-wrap: wrap;
}
}
The benefit of this approach is when browsers do support CSS Grid, the ruleset within the @supports
block is ignored as opposed to overriding the ruleset above via the cascade.
Multiple Checks Using or & and Operators
You can also check support for multiple properties using the or
& and
operators.
/* and */
@supports (aspect-ratio: 16 / 9) and (backdrop-filter: blur(10px)) {
/* If both conditions are true, use the CSS in this block. */
}
/* or */
@supports (aspect-ratio: 16 / 9) or (backdrop-filter: blur(10px)) {
/* If either of the conditions are true, use the CSS in this block. */
}
Feature Queries are a handy tool that allow you to take advantage of the latest CSS features while still ensuring that your site looks good on all devices and browsers!