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?
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?
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.
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 */
}