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 book!

Did you know?

I have 7 premium training programs that will transform you, quickly, into an excellent Node/React/JS/Vue/Next.js/Svelte developer. Choose your own adventure. Practical lessons to learn the 80% of the things that you need to know, in 20% of the time!

⬇️ ⬇️ ⬇️

Check out all my courses now!

⬆️ ⬆️ ⬆️