What are Feature Queries in CSS? How do you use them and what do they do? [duplicate]

3

I've heard a lot about the term Feature Queries when talking about CSS3.

But what are they and what are Feature Queries for?

How does this apply to projects' CSS?

    
asked by anonymous 20.07.2018 / 20:05

1 answer

0

According to the W3C specification, " features querys "are:

  

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.

free translation:

  

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

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 the average queries

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