Feature Queries

Feature queries are used in CSS for precise feature detection and are now supported by all modern browsers!

We use the @supports keyword for feature queries, as shown in the example below:

@supports (height: 100vh) {
  .container {
    height: 100vh;
  }
}

Here, we check if the vh unit is supported. If so, the height value is set accordingly.

Feature queries are structured much like media queries.

Let’s expand upon this example:

.element {
  height: 100%;
}

@supports (height: 100vh) {
  .element {
    height: 100vh;
  }
}

We’ve provided a fallback by default, giving the element a height of 100%. If the browser supports vh, then 100vh applies instead.

The @supports keyword can be used for any available property in CSS.The logical operators, and, or and not, can also be used in feature queries. Let’s use and to check if CSS Grid and Flexbox are supported by the user’s browser:

@supports (display: grid) and (display: flex) {
  /* ... */
}

The example given below checks if CSS Grid is supported:

.element {
  float: left;
  ...
}

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