CSS Feature Queries

How to work with feature queries in CSS

Join the 2022 Full-Stack Web Dev Bootcamp!


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 */
}

Download my free CSS Handbook!

Want to become a better Web Developer? Join the 2022 Web Development Bootcamp!

⭐️⭐️⭐️ Join the 2022 Web Development Bootcamp ⭐️⭐️⭐️