Recentemente, tornei pública uma estrutura CSS que desenvolvi para a criação de designs radiais. Durante o desenvolvimento, enfrentei vários desafios, incluindo testar diferentes recursos. Percebi que os linters CSS e outras ferramentas não me permitiam ver por que algo não estava funcionando, mesmo que não houvesse erros básicos. Outro problema típico do CSS era ver como ele era compartilhado entre diferentes navegadores. Felizmente, descobri que alguns novos recursos CSS podem ser usados ​​para criar uma série de testes em tempo real. Esses recursos são @support, @container e :has().

Ao combinar essas funcionalidades, desenvolvi um sistema de testes não só para verificar se o framework funciona no navegador, mas também, e mais importante, para ver se estamos aplicando o HTML corretamente de acordo com os requisitos do navegador e evitando erros involuntários no desenvolvimento um aplicativo.

Como meu framework CSS usa necessariamente recursos que apenas os navegadores mais novos possuem, como funções trigonométricas como cos() e sin(), criei uma série de regras para testar se elas são suportadas pelo navegador. Caso contrário, aparecerá uma mensagem solicitando a atualização do navegador. Da mesma forma, se o navegador não suportar :has(), que é usado em todo o framework.

Também existem casos típicos de incompatibilidade de navegador, portanto, em alguns casos não críticos, eu uso @support ou @container para ocultar certos recursos do Orbit que não afetam seu uso. Por exemplo, o Safari não aceita traços de contexto SVG, então eu os escondo.

No entanto, além dessas verificações críticas e de compatibilidade, o problema mais comum ao usar uma estrutura CSS é não saber como usá-la corretamente. Por isso criei outras regras CSS que permitem analisar se um elemento pai possui os elementos filhos necessários e não outros. Aqui, alertas visuais também aparecem durante o desenvolvimento para dar uma dica sobre onde está o erro no código.

Não quero aborrecê-los com os detalhes específicos do Orbit, mas deixarei o link para a fonte de suporte e a documentação relacionada.

Repositório: https://github.com/zumerlab/orbit
Arquivo fonte: https://github.com/zumerlab/orbit/blob/main/src/scss/_support.scss
Documentação de suporte Orbit: https://zumerlab.github.io/orbit-docs/tools/support/

É bom ir mais fundo: https://heydonworks.com/article/testing-html-with-modern-css