Veuillez noter, pas le panneau Styles (je sais ce que signifie grisé dans ce contexte - non appliqué), mais le panneau suivant, le panneau Propriétés calculées.
Qu'est-ce que cela signifie lorsqu'une propriété calculée est affichée en grisé?
Exemple:
css
google-chrome
google-chrome-devtools
AmbroseChapelle
la source
la source
Réponses:
NB: Cette réponse n'a pas de preuves solides, elle est basée sur mes observations au fil du temps.
Les propriétés calculées grises 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 son parent en fonction du rendu de la disposition d'exécution.
Prenez cette page simple comme exemple,
displayest par défaut etfont-sizeest héritée:<style> div { font-size: 13px; } </style> <div> <p>asdf</p> </div>Dans cet exemple particulier,
heightest calculé à partir<p>du nœud de texte enfants de (taille de police plus hauteur de ligne),widthest calculé à partir de<div>la largeur de son parent , 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 jeter un œil au 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 pour lui (soit directement, soit héritée, soit par le développeur ou le navigateur):
Ici, vous pouvez retracer chaque définition, y compris les règles intégrées du navigateur, et vérifier avec le mécanisme CSS en cascade (remplacement).
Donc, pour les éléments qui n'ont pas de définition CSS (pas de définition directe, pas d'héritage, pas de navigateur intégré), vous n'avez aucune source à tracer. Et les valeurs de propriété sont totalement calculées à l'exécution.
Si vous cochez Afficher tout , d'autres 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, ceux-ci ne sont pas calculés à l'exécution - ce sont les valeurs par défaut des spécifications CSS.
la source
run-time calculatedpuisque les propriétés de gris sont généralement 'height' et 'width', qui, si vous y réfléchissez, sont des valeurs qui dépendent dynamiquement des enfants d'un élément (par exemple, la quantité de texte et la taille de la police de le texte contenu dans l'élément ou la largeur du parent lorsque l'élément a une largeur: 100%)widthstyle par exemple.