DEV Community

Cover image for CSS Feature Queries Tutorial
Richard Rembert
Richard Rembert

Posted on • Edited on

2

CSS Feature Queries Tutorial

Feature Queries are used in CSS for precise feature detection. And they’re now supported by all the modern browsers!

We use the @supports keyword. For example:

@supports (height: 100vh) {
  .container {
    height: 100vh;
  }
}
Enter fullscreen mode Exit fullscreen mode

Here we’re checking if the vh unit is supported. If so, the height value is set accordingly.

As you can see they’re structured much like a media query.

Let’s expand upon our example:

.container {
  height: 100%;
}
@supports (height: 100vh) {
  .container {
    height: 100vh;
  }
}
Enter fullscreen mode Exit fullscreen mode

Here, we’ve provided a fallback by default giving the container a height value of 100%. If the browser supports the vh value, 100vh will apply instead.

Older browsers will simply ignore the @supports block.

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 more complex feature queries.

Let’s use and to check if the browser supports CSS Grid and Flexbox:

@supports (display: grid) and (display: flex) {
  /* ... */
}
Enter fullscreen mode Exit fullscreen mode

Another example, asking if CSS Grid is supported:

.element {
  float: left;
  ...
}
@supports (display: grid) {
  .element {
    float: none;
    display: grid;
    /* ... */
   }
}
Enter fullscreen mode Exit fullscreen mode

Simple and effective!

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (1)

Collapse
 
ahmed_onour profile image
Ahmed Onour

Nice, Good Job

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore