CSS Feature Queries
How to work with feature queries in CSS
Feature queries are a recent and relatively unknown ability of CSS, but a well supported one.
We can use it to check if a feature is supported by the browser using the @supports
keyword.
This is an example I think this is especially useful, at the time of writing, for checking if a browser supports CSS grid, which can be done using:
@supports (display: grid) {
/* apply this CSS */
}
We check if the browser supports the grid
value for the display
property.
We can use @supports
for any CSS property, to check any value.
We can also use the logical operators and
, or
and not
to build complex feature queries.
This example checks if the browser supports both CSS Grid and Flexbox:
@supports (display: grid) and (display: flex) {
/* apply this CSS */
}
→ Get my CSS Handbook
→ Read my CSS Tutorial on
The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X