A detecção de recursos via JavaScript é uma prática recomendada no lado do cliente, mas, infelizmente, essa mesma funcionalidade não está disponível em CSS. O que dá para fazer é repetir as mesmas propriedades várias vezes com cada prefixo de navegador. Que nojo… Mas eis que (finalmente) surge uma solução: CSS @supports!

Firefox, Chrome e Opera recentemente adicionaram suporte para CSS @supports (CSS) e CSS.supports (JavaScript) para detectar o suporte de navegador para uma determinada propriedade de estilo. Vejamos como isso funciona.

CSS @supports

A diretiva @supports de CSS funciona mais ou menos da mesma maneira que media queries:

CSS @supports permite aos desenvolvedores verificarmos o suporte a estilo de várias maneiras diferentes.

Checagem de propriedades básicas

É possível checar propriedades básicas de CSS como no exemplo:

Esse é o uso mais básico possível do @supports.

Palavra-chave not

Tal como em media queries, CSS @supports pode usar a palavra-chave not para checar um não-suporte:

Checagem múltipla e condicionais

Se for preciso checar múltiplas propriedades CSS, isso pode ser feito ao usar as palavras-chave and ou or encadeadas:

Assim como em linguagens de programação, é possível encadear múltiplas condições com parênteses:

Como dito, o padrão condicional da estrutura de @supports coincide com o padrão condicional de @media.

JavaScript CSS.supports

A contrapartida JavaScript para CSS @supports é window.CSS.supports. A especificação CSS.supports fornece 2 métodos de uso.

O primeiro inclui fornecer 2 argumentos, um para a propriedade e outro para o valor:

O segundo método de uso inclui simplesmente fornecer a seqüência inteira a ser analisada:

É muito bom que haja opções e seja possível verificar o suporte de CSS através de qualquer método — isso evita a verificação de propriedade em nós transitórios e construção de seqüências de caracteres para verificar o suporte.

Antes de usar o método JavaScript de CSS suporte, é importante detectar o recurso primeiro — o Opera usa um nome de método diferente, então é preciso ficar atento:

Uso de @supports

Na maioria dos casos, a melhor maneira de usar @supports é configurando um conjunto mais antigo de estilos como backup e, em seguida, “cancelando” esses estilos e aprimorando se uma determinada propriedade é suportada — Progressive Enhancement, baby!

Um caso de uso brilhante para @supports é em layouts. Veja um exemplo envolvendo Flexbox:

Exemplo prático: usando flow-root

Atualmente (na data de publicação deste artigo) o suporte para flow-root é quase nulo, conseguindo somente seus modestos 0,2% — se não souber do que se trata, leia um artigo a respeito.

Mas, graças a @supports, é possível usar o novo valor da propriedade CSS display e se livrar de uma vez por todas do famoso hack clearfix. E de uma maneira simplíssima:

Ou seja, tal como de costume em projetos que seguem a filosofia progressive enhancement, especifica-se um valor que se tem certeza que funciona amplamente e, logo em seguida, valendo-se dos efeitos de cascata das folhas de estilo, verifica-se o suporte a flow-root com @supports para escrever a regra usando as novas capacidades de CSS.

Conclusão sobre @supports

Na verdade, @supports não é nenhuma grande novidade no mundo CSS, mas, infelizmente, ainda não é muito usado para verificações de suporte e desenvolvimento progressive enhancement.

Na data de publicação deste artigo, é possível ver que o suporte global de navegadores para @supports já é excelente, ultrapassando a casa dos 92%:

CSS @supports já é quase totalmente suportado pelos principais navegadores.

Nenhuma surpresa quanto ao navegador que ainda não oferece suporte…

@supports revela-se como uma diretiva importante de verificação de estilos, indispensável quando o projeto web segue progressive enhancement. De escrita simples e rápida, @supports deveria estar muito, muito mais presente nas linhas de código CSS do que é possível encontrar atualmente.