What are CSS Feature Queries? How do you use them and what are they for?

Question

I’ve been hearing the term a lot Feature Queries when referring to CSS3.

But what are they and what are they for Feature Queries?

How this applies in the CSS of projects?

Answer 1

According to the W3C specification, "Features querys" sane:

The ː@Supports' Rule is a conditional group Rule Whose condition tests whether the user agent Supports CSS Property:value pairs. Authors can use it to write style Sheets that use new Features when available but degrade gracefully when those Features are not supported. CSS has existing mechanisms for Graceful Degradation, such as ignoring Unsupported properties or values, but These are not Always sufficient when large groups of Styles need to be tied to the support for Certain Features, as is the case for use of new layout system Features.

in free translation:

The@Supports rule is a conditional group rule that states that the user agent supports CSS a "property/value" pair. The authors can use it to write style when they are not available. The HSC has existing mechanisms for degradation normal, such as ignoring unsupported properties or values, but they are not necessarily sufficient when large groups of styles need to be connected to the support of certain resources, as is the case of use of new layout system features.

In practice

With @Supports, we can write a conditional statement (a.k.a Feature query), which will be taken into account if and only if the CSS property is supported by the browser.

It is worth noting that this feature is not available for IE 11 and earlier. Source: Caniuse CSS Feature Querie

The use of @support is similar to media queries

@supports (background-blend-mode: hue) {
   /* as regras definidas aqui serão aplicadas
     se o browser suportar o  background-blend-mode: hue */
}