Skip to content

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

→ Here's my latest YouTube video

→ Get my CSS Handbook

→ 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

Bootcamp 2025

Join the waiting list