Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026
The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.
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 */
}