DEV Community

Cover image for CSS Feature Queries Tutorial
Richard Rembert
Richard Rembert

Posted on • Edited on

CSS Feature Queries Tutorial

#css #webdev #tutorial #writing

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

Top comments (1)

Collapse
 
ahmed_onour profile image
Ahmed Onour •

Nice, Good Job