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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
ahmed_onour profile image
Ahmed Onour

Nice, Good Job

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay