CSS Feature Queries: How to Work with Them

CSS Feature Queries are a powerful but often overlooked feature in CSS. They allow us to check if a specific feature is supported by the browser before applying a specific CSS style. In this blog post, we’ll explore how to use feature queries effectively.

Feature queries are supported by most modern browsers. You can check the compatibility of feature queries using the Can I Use website.

To use feature queries, we need to use the @supports keyword followed by the CSS property and value we want to check. Let’s take an example of checking if the browser supports CSS Grid:

@supports (display: grid) {
  /* Apply this CSS */
}

In the above code, we check if the browser supports the grid value for the display property. If the browser supports it, the CSS within the @supports block will be applied; otherwise, it will be ignored.

It’s important to note that we can use @supports with any CSS property and value combination. This means we can check the support for various CSS features in a similar way. For example, if we want to check if the browser supports both CSS Grid and Flexbox:

@supports (display: grid) and (display: flex) {
  /* Apply this CSS */
}

In the above code, the CSS within the @supports block will only be applied if the browser supports both CSS Grid and Flexbox.

In addition to using simple property-value checks, we can also use logical operators such as and, or, and not to build more complex feature queries. This allows us to check for multiple conditions before applying the CSS styles.

Using CSS Feature Queries can greatly enhance the flexibility and compatibility of our CSS code. By checking for support before applying styles, we can ensure a consistent experience for users across different browsers.

Tags: CSS, Feature Queries, Can I Use, CSS Grid, Flexbox