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;
  }
}

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;
  }
}

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) {
  /* ... */
}

Another example, asking if CSS Grid is supported:

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

Simple and effective!

Conclusion

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