Yes, you can start using CSS feature queries

CSS feature queries are now supported everywhere. They allow you to use cutting edge CSS with subtle and precise feature detection.

Feature queries are supported by Chrome 63+, Microsoft Edge 16+, Firefox 57+, Safari 11+, iOS Safari 11.2+, Chrome for Android 62+, and UC Browser for Android 11.4+. There's no support in Microsoft IE, but it doesn't really matter.

This article shows how to use feature queries in CSS, and how they work even with older browsers that don't even know they're there.

Share  

How do feature queries work?

The concept is quite simple, and has the same structure as media queries.
CSS
This asks if the vh value is supported. This is the height of the browser window, the viewport height, rather than the height of the page. If so, it sets the height value.

The following example shows real world use of feature queries.

CSS
The container div has a height value of 100%, unless the browser supports the vh value. Older browsers will simply ignore the feature queries block.

The not operator is also supported.

CSS
And that's it! Simple and highly-effective.
Share  

Read more on Tipue