Tenho ouvido bastante o termo Feature Queries quando se fala em CSS3.
Mas o que são e para que servem as Feature Queries
?
Como se aplica isso no CSS dos projetos?
Tenho ouvido bastante o termo Feature Queries quando se fala em CSS3.
Mas o que são e para que servem as Feature Queries
?
Como se aplica isso no CSS dos projetos?
Segundo a especificação da W3C, "features querys" são:
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.
em tradução livre:
A regra '@supports' é uma regra de grupo condicional que afirma que o agente do usuário suporta CSS um par "propriedade/valor". Os autores podem usá-lo para escrever estilo quando não estiverem disponíveis. O CSS possui mecanismos existentes para degradação normal, como ignorar propriedades ou valores não suportados, mas eles não são necessariamente suficientes quando grupos grandes de estilos precisam estar ligados ao suporte de determinados recursos, como é o caso do uso de novos recursos do sistema de layout.
Com @supports, podemos escrever uma instrução condicional (a.k.a feature query), que será levada em conta se e somente se a propriedade CSS for suportada pelo navegador.
Vale a pena frisar que este recurso não está disponível para o IE 11 e anteriores. Fonte: CanIUse CSS Feature Querie
O uso do @support é semelhante ao media queries
@supports (background-blend-mode: hue) {
/* as regras definidas aqui serão aplicadas
se o browser suportar o background-blend-mode: hue */
}