1
Selecteur :has()
Detecte les changements visuels causes par les selecteurs parent :has() qui stylisent conditionnellement selon les enfants.
40 cas de test
CSS Moderne
Le CSS moderne introduit des fonctionnalites puissantes qui peuvent changer le rendu de votre page entiere. Delta-QA reste a jour avec les dernieres specifications CSS et detecte les regressions dans les fonctionnalites avancees que les outils traditionnels manquent.
Ce que nous detectons
2
Imbrication CSS
Surveille le comportement de l'imbrication CSS native et capture les regressions de specificite des regles imbriquees.
3
Cascade @layer
Suit les changements d'ordre des couches de cascade qui peuvent surcharger inopinement les styles de votre application.
4
Subgrid
Detecte les changements de layout quand l'alignement subgrid se casse entre les conteneurs grille parent et enfant.
5
@scope
Surveille les changements de styles scopes et les conditions de bordure qui affectent l'isolation des styles de composants.
6
Proprietes logiques
Capture les changements de proprietes logiques (inline-start, block-end) utilisees pour les layouts internationalises.
Exemple interactif
Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.
Avant
Apres
Scénarios concrets
🎯
Le container query qui ne fonctionne pas partout
Un développeur utilise des container queries CSS pour adapter un composant à son conteneur mais oublie de définir container-type sur le parent. Sur Chrome, le fallback fonctionne. Sur Safari, le composant se retrouve mal dimensionné — trop large ou trop étroit selon le contexte. Vos visiteurs sur iPhone voient un composant cassé. L'équipe développe et teste sur Chrome, pas sur tous les navigateurs à chaque sprint. Delta-QA capture le site sur chaque navigateur et compare les captures : le composant mal dimensionné sur Safari ressort dans le diff.
⚠️
Le :has() qui exclut Firefox
Un développeur utilise le sélecteur :has() pour styliser un formulaire — labels surlignés quand le champ est rempli, champs obligatoires mis en évidence. Sur Firefox (avant la version 121), :has() n'est pas supporté : les visiteurs voient un formulaire sans aucun de ces repères visuels. L'équipe développe sur Chrome, le bug n'apparaît jamais en local. Delta-QA capture le formulaire sur chaque navigateur et compare visuellement : les styles manquants sur Firefox ressortent dans la superposition.
💡
La sous-grille qui casse l'alignement
Un développeur utilise subgrid pour aligner prix, descriptions et boutons dans une grille de produits. Sur un navigateur qui ne supporte pas subgrid, les éléments se désalignent : les prix ne sont plus en face des produits, les boutons « Acheter » sont à des hauteurs différentes. Le QA a vérifié sur Chrome (qui supporte subgrid), pas sur les autres navigateurs. Delta-QA capture la grille sur chaque navigateur et compare les captures : les éléments désalignés ressortent dans le diff.
Pret a detecter chaque regression visuelle ?
Telechargez Delta-QA et detectez les changements CSS dans vos pages web — sans code.