1
Selector :has()
Detecta cambios visuales causados por selectores padre :has() que estilizan elementos condicionalmente segun sus hijos.
40 casos de prueba
CSS Moderno
El CSS moderno introduce funcionalidades poderosas que pueden cambiar como se renderiza toda su pagina. Delta-QA se mantiene actualizado con las ultimas especificaciones CSS y detecta regresiones en funcionalidades avanzadas.
Lo que detectamos
2
Anidamiento CSS
Monitorea el comportamiento de anidamiento CSS nativo y captura regresiones de especificidad en reglas anidadas.
3
Cascada @layer
Rastrea cambios de orden de capas de cascada que pueden sobreescribir estilos inesperadamente.
4
Subgrid
Detecta cambios de layout cuando la alineacion subgrid se rompe entre contenedores grid padre e hijo.
5
@scope
Monitorea cambios de estilos con scope y condiciones de limite que afectan el aislamiento de estilos.
6
Propiedades logicas
Captura cambios en propiedades logicas (inline-start, block-end) usadas para layouts preparados para internacionalizacion.
Ejemplo interactivo
Vea exactamente lo que Delta-QA detecta. Compare las dos versiones lado a lado.
Antes
Despues
Escenarios reales
🎯
El container query que no funciona en todos lados
Un desarrollador usa container queries CSS para adaptar un componente a su contenedor pero olvida definir container-type en el padre. En Chrome, el fallback funciona. En Safari, el componente queda mal dimensionado — demasiado ancho o demasiado estrecho según el contexto. Tus visitantes en iPhone ven un componente roto. El equipo desarrolla y testea en Chrome, no en todos los navegadores en cada sprint. Delta-QA captura el sitio en cada navegador y compara las capturas: el componente mal dimensionado en Safari resalta en el diff.
⚠️
El :has() que excluye a Firefox
Un desarrollador usa el selector :has() para dar estilo a un formulario — labels resaltados cuando el campo está lleno, campos obligatorios destacados. En Firefox (antes de la versión 121), :has() no es compatible: los visitantes ven un formulario sin ninguna de estas pistas visuales. El equipo desarrolla en Chrome, el bug nunca aparece en local. Delta-QA captura el formulario en cada navegador y compara visualmente: los estilos faltantes en Firefox resaltan en la superposición.
💡
El subgrid que rompe la alineación
Un desarrollador usa subgrid para alinear precios, descripciones y botones en una grilla de productos. En un navegador que no soporta subgrid, los elementos se desalinean: los precios ya no coinciden con los productos, los botones "Comprar" quedan a alturas diferentes. QA revisó en Chrome (que soporta subgrid), no en los demás navegadores. Delta-QA captura la grilla en cada navegador y compara las capturas: los elementos desalineados resaltan en el diff.
¿Listo para detectar cada regresion visual?
Descarga Delta-QA y empieza a detectar cambios CSS en tus paginas web — sin codigo.