1
Seletor :has()
Detecta mudancas visuais causadas por seletores pai :has() que estilizam elementos condicionalmente com base nos filhos.
40 casos de teste
CSS Moderno
O CSS moderno introduz funcionalidades poderosas que podem mudar como toda a pagina e renderizada. O Delta-QA se mantem atualizado com as ultimas especificacoes CSS e detecta regressoes em funcionalidades avancadas.
O que detectamos
2
Aninhamento CSS
Monitora o comportamento de aninhamento CSS nativo e captura regressoes de especificidade em regras aninhadas.
3
Cascata @layer
Rastreia mudancas de ordem de camadas de cascata que podem sobrescrever estilos inesperadamente.
4
Subgrid
Detecta mudancas de layout quando o alinhamento subgrid se quebra entre containers grid pai e filho.
5
@scope
Monitora mudancas de estilos com escopo e condicoes de limite que afetam o isolamento de estilos.
6
Propriedades logicas
Captura mudancas em propriedades logicas (inline-start, block-end) usadas para layouts internacionalizados.
Exemplo interativo
Veja exatamente o que o Delta-QA detecta. Compare as duas versões lado a lado.
Antes
Depois
Cenários reais
🎯
O container query que nao funciona em todo lugar
Um desenvolvedor usa container queries CSS para adaptar um componente ao seu container mas esquece de definir container-type no pai. No Chrome, o fallback funciona. No Safari, o componente fica mal dimensionado — largo demais ou estreito demais conforme o contexto. Seus visitantes no iPhone veem um componente quebrado. A equipe desenvolve e testa no Chrome, nao em todos os navegadores a cada sprint. Delta-QA captura o site em cada navegador e compara as capturas: o componente mal dimensionado no Safari se destaca no diff.
⚠️
O :has() que exclui o Firefox
Um desenvolvedor usa o seletor :has() para estilizar um formulario — labels destacados quando o campo esta preenchido, campos obrigatorios em evidencia. No Firefox (antes da versao 121), :has() nao e suportado: os visitantes veem um formulario sem nenhuma dessas dicas visuais. A equipe desenvolve no Chrome, o bug nunca aparece localmente. Delta-QA captura o formulario em cada navegador e compara visualmente: os estilos ausentes no Firefox se destacam na sobreposicao.
💡
O subgrid que quebra o alinhamento
Um desenvolvedor usa subgrid para alinhar precos, descricoes e botoes em um grid de produtos. Em um navegador que nao suporta subgrid, os elementos se desalinham: os precos nao ficam mais alinhados com os produtos, os botoes "Comprar" ficam em alturas diferentes. O QA verificou no Chrome (que suporta subgrid), nao nos outros navegadores. Delta-QA captura o grid em cada navegador e compara as capturas: os elementos desalinhados se destacam no diff.
Pronto para detectar toda regressao visual?
Baixe o Delta-QA e comece a detectar mudancas CSS nas suas paginas web — sem codigo.