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 */
}
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025