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
Top comments (1)
Nice, Good Job