Vérificateur CSS Rendu Réel de la Règle GagnanteUtiliser le moteur du navigateur pour vérifier quelle règle CSS gagne

Pourquoi faut-il vraiment effectuer un rendu, et pas seulement un calcul ?

La plupart des calculateurs de spécificité CSS en ligne se contentent d'injecter votre sélecteur dans une formule pour en sortir un score — par exemple, #main p obtient (1,0,1) et .card.active obtient (0,2,0). Mais ce qu'un vrai navigateur décide lorsque plusieurs règles entrent en conflit dépend aussi de l'héritage, de l'ordre de la cascade, de !important, et de la façon dont chaque propriété est écrite dans différentes règles — autant d'éléments que les calculateurs théoriques ignorent totalement. Cet outil adopte une approche différente : il fait rendre votre HTML et votre CSS collés dans un iframe caché, pour que le navigateur applique réellement les styles, puis relit le résultat véritable avec getComputedStyle(). Ce que vous voyez correspond à ce que le navigateur a vraiment décidé — pas un chiffre calculé sur papier.

Comment se compare réellement le score (a, b, c) — un exemple concret

La spécificité CSS s'écrit sous forme de trois nombres (a, b, c) : a compte les sélecteurs d'ID, b compte les sélecteurs de classe/attribut/pseudo-classe, c compte les sélecteurs de type/pseudo-élément. La comparaison fonctionne comme une comparaison de chiffres — celui qui a le 'a' le plus élevé gagne d'emblée, et on ne compare 'b' que si 'a' est à égalité. Par exemple, #main p obtient (1,0,1) tandis que .card .title.active obtient (0,3,0) — #main p gagne quand même, car 1 > 0 sur 'a', même si l'autre sélecteur empile trois classes. Si deux règles ont exactement la même spécificité, le navigateur applique celle définie le plus tard dans le CSS — c'est pourquoi l'ordre des règles dans le fichier compte aussi. !important est le seul élément capable d'ignorer complètement la spécificité : une règle moins spécifique mais dotée de !important l'emporte sur une règle plus spécifique qui ne l'a pas (sauf si l'autre règle a également !important, auquel cas c'est de nouveau la spécificité qui tranche).

Dans quel cas devriez-vous vraiment utiliser cet outil ?

Le déclencheur classique est : « j'ai écrit cette règle CSS et rien n'a changé à l'écran » — ce qui signifie généralement qu'une autre règle avec une spécificité plus élevée (ou !important) l'écrase. Collez le HTML+CSS en conflit, indiquez le sélecteur de l'élément à déboguer, et l'outil liste toutes les règles correspondantes avec leur score de spécificité, laissant le véritable moteur du navigateur déterminer laquelle gagne réellement — plus besoin de deviner quelle couche de la cascade l'emporte.

Cet outil effectue son rendu dans un iframe isolé, sans polices, images ou exécution JavaScript externes, et ne prend en charge ni le Shadow DOM ni les styles CSS-in-JS injectés dynamiquement — collez des extraits HTML/CSS statiques pour obtenir des résultats fiables.