Styles calculés et inspecteur du modèle de boîte

L’onglet Calculés de Chrome DevTools → Éléments affiche la valeur finale calculée de chaque propriété CSS sur l’élément sélectionné, après résolution de la cascade, de l’héritage et de la spécificité. Il répond à la question « qu’est-ce qui est réellement appliqué ? » plutôt qu’à « qu’est-ce qui a été écrit ? »

Le panneau Calculés affiche un schéma interactif du modèle de boîte présentant les dimensions du contenu, de l’espace intérieur, de la bordure et de la marge de l’élément sélectionné. Cliquez sur une dimension pour mettre en évidence la règle CSS qui l’a définie et accéder au panneau des styles.

Saisissez du texte dans le champ de filtrage pour trouver rapidement des propriétés calculées précises. Cochez « Tout afficher » pour inclure les propriétés héritées et celles définies par défaut par le navigateur. Décochez cette option pour n’afficher que les propriétés non définies par défaut — le chemin le plus rapide vers les styles appliqués pertinents.

Les propriétés affichées en gris dans le panneau Calculés sont héritées d’un parent. Cliquez sur la propriété héritée pour accéder à l’élément et à la règle qui l’a définie, et suivre la cascade sans inspecter manuellement les parents dans le balisage.

L’écriture de margin: 16px 8px se développe en quatre valeurs calculées : marge supérieure, marge droite, marge inférieure et marge gauche. Le panneau Calculés affiche toujours les propriétés individuelles en notation détaillée — ce qui est utile pour déboguer les problèmes d’espacement asymétrique.

Les valeurs de couleur calculées sont toujours au format rgb() ou rgba(), quelle que soit la manière dont elles ont été écrites. Cliquez sur un échantillon de couleur dans le panneau des styles pour changer de format d’affichage (hexadécimal, hsl, rgb). Le panneau Calculés affiche toujours la couleur résolue.

Inspectez la taille de police, la famille de polices, la hauteur de ligne et l’espacement des lettres calculés pour vérifier que les paramètres typographiques sont correctement appliqués. Les polices de repli du navigateur apparaissent dans la famille de polices calculée lorsqu’une police demandée ne parvient pas à se charger.

Le dimensionnement de boîte avec bordure comprise inclut le remplissage et la bordure dans la largeur ; le dimensionnement limité au contenu (par défaut) les exclut. Le schéma du modèle de boîte dans DevTools reflète le modèle appliqué — comparez la largeur du contenu à la largeur totale pour confirmer le comportement du dimensionnement de boîte.

Les marges verticales entre les éléments de type bloc fusionnent pour prendre la plus grande des deux valeurs. Le schéma du modèle de boîte affiche la marge effective — utilisez-le avec l’inspecteur de mise en page pour repérer les marges fusionnées qui diffèrent des valeurs écrites.

Le panneau des styles affiche toutes les règles ciblant l’élément dans l’ordre de spécificité. Les règles barrées sont remplacées. Pour trouver quelle règle l’emporte dans un conflit de propriétés, recherchez la déclaration non barrée la plus haute dans le panneau des styles.

Les règles de la feuille de style de l’agent utilisateur du navigateur apparaissent en bas du panneau des styles, sous l’intitulé « feuille de style de l’agent utilisateur ». Le panneau Calculés affiche leurs valeurs résolues. Réinitialisez-les avec une réinitialisation CSS ou Normalize.css afin d’établir une base cohérente entre les navigateurs.

Que montre le panneau des styles calculés que le panneau des styles n’affiche pas ?

Le panneau des styles calculés et le schéma du modèle de boîte révèlent les valeurs finales résolues de toutes les propriétés CSS après la résolution de la cascade. Utilisez-les pour suivre l’héritage, déboguer le développement des propriétés abrégées, étudier le dimensionnement de boîte et déterminer quelle règle l’emporte dans les conflits de spécificité sur n’importe quel élément.