Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.
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 that I think 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 */
}