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 for 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.

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, the viewport height of the browser, 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 @supports block.

The not operator is also supported.

CSS
Another example, this time asking if CSS Grid Layout is supported.
CSS
And so on. Simple and effective.
More from Tipue

Tipue Search, a jQuery Site Search Plugin

Tipue Search is a site search jQuery plugin. It's free, open source, responsive and fast. Tipue Search only needs a browser that supports jQuery.
More >

A Responsive Text Input Form Field

When most people want a responsive text input form field they wrap it in a div. There's a more concise way.

More >