Qu'est-ce que cela signifie lorsque Chrome Dev Tools affiche une propriété calculée grisée
Veuillez noter que pas le panneau Styles (je sais ce que signifie grisé dans ce contexte — non appliqué), mais le panneau suivant, les propriétés calculées panneau.
Qu'est-ce que cela signifie lorsqu'une propriété calculée est grisée?
Exemple:
NB: Cette réponse n'a aucune preuve solide, elle est basée sur mes observations au fil du temps.
Les propriétés calculées en gris ne sont ni par défaut, ni héritées. Cela se produit uniquement sur les propriétés qui n'ont pas été définies pour l'élément, mais calculées à partir de ses enfants ou de leur parent en fonction du rendu de la disposition d'exécution.
Prenons cette simple page comme exemple, display est par défaut et font-size Est hérité:
<style>
div { font-size: 13px; }
</style>
<div>
<p>asdf</p>
</div>
Dans cet exemple particulier, height est calculé à partir du nœud de texte enfants de <p> (Taille de police plus hauteur de ligne), width est calculé à partir de son parent - <div> la largeur de, qui est également calculée à partir de son parent <body>.
EDIT: Eh bien, j'ai pensé à nouveau, voici ma réponse basée sur l'opinion . Je devrais vraiment aller voir le code source de Chromium plus tard: D
En développant ces flèches, vous pouvez voir quelle règle réelle est appliquée à l'élément, parmi toutes celles définies par rapport à lui (directement ou héritées, soit par le développeur soit par le navigateur):
Ici, vous pouvez retracer jusqu'à chaque définition, y compris les règles intégrées du navigateur, et vérifier avec le mécanisme de cascade CSS (prioritaire).
Donc, pour les éléments qui n'ont pas de définition CSS (pas directement définis, pas hérités, pas de navigateur intégré), vous n'avez aucune source à tracer. Et les valeurs des propriétés sont entièrement calculées à l'exécution.
Si vous cochez Afficher tout , plus de propriétés grisées sont affichées. Celles-ci ne sont définies nulle part non plus. Mais contrairement à ceux des captures d'écran précédentes, ce ne sont pas non calculés lors de l'exécution - ce sont les valeurs par défaut des spécifications CSS.
