CSS Feature Queries

CSS Feature Queries | CSS Supports Rule | How to Use Feature Queries in CSS?

by

Behold, the @supports rule. Moreover, known as Feature Queries in CSS. If you want to learn more about the supports CSS Feature Queries just go with the below links available in this tutorial.

Feature Queries in CSS

It is a recent addition to the CSS and also not very much used. We can check if a particular property supports in a particular browser by using the @supports property.

CSS Feature Queries permit authors to state rules on the basis of whether particular property declarations are supported in CSS using the @supports at-rule.

Do Refer: 

CSS Feature Query Examples

If a browser supports a grid then apply a particular style.

@supports (display: grid) {
  /* apply this CSS */
}

We can use@supportsfor any CSS property, to check any value.

Also, we can utilize logical operators such as and, or and not to create complex feature queries in CSS.

The following example verifies whether the browser supports both CSS Grid and Flexbox:

@supports (display: grid) and (display: flex) {
  /* apply this CSS */
}

New Image Effects Example using CSS Feature Queries

we have numerous new image effects that can be arranged with CSS. Browser support varies of course, but a few of these new effects are quite cool. Who would have imagined overlays weren’t simply a Photoshop layer anymore? Let’s have a glance at mix-blend modes and how they can be used to images when supported.

CSS Feature Queries are a tool for bundling collectively CSS declarations so that they’ll run as a group. The resulting example may look complicated, but once it is broken down, it will make more sense.

Let’s see the simple HTML snippet that has a class implemented on the<article>tag.

&amp;amp;amp;lt;article class=&amp;amp;quot;feature-img&amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;quot;example-img.jpg&amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;/article&amp;amp;amp;gt;

The CSS:

@supports (mix-blend-mode: overlay) and ((background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0))) or (background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0)))) {
 
.feature-img {
background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
}
.feature-img img {
mix-blend-mode: overlay;
}
}

Previously, we know that the condition should hold both a property and a value. In the above example, you’re checking for the mix-blend-mode property and the overlay value for that property. Clearly, this block is looking for browsers that allow for the mix-blend-mode of overlay and the ability to render a linear gradient. If this is supported, the image will have an overlay with a gradient applied to it, giving it a red color.

css feature queries new image effects output

However, for browsers that don’t have mix-blend-mode support, just apply this syntax with not. There may be some styles applied, but very limited in comparison to those in the above query.

@supports not(mix-blend-mode: overlay) {
.feature-img img {
opacity: 0.5;
filter: alpha(opacity=50);
}
}

Result:

output for supports css feature query example