Qu'est-ce que cela signifie lorsqu'une règle CSS est grisée dans l'inspecteur d'éléments de Chrome?
J'inspecte un élément h2 sur une page Web à l'aide de l'inspecteur d'éléments de Google Chrome et certaines règles CSS - qui semblent être appliquées - sont grisées. Il semble qu'une barre oblique indique qu'une règle a été remplacée, mais que signifie-t-elle lorsqu'un style est grisé?
Pour moi, les réponses actuelles n’expliquent pas suffisamment le problème et j’ajoute donc cette réponse qui, espérons-le, pourrait être utile aux autres.
Texte grisé/grisé, peut signifier soit
- le navigateur applique cette règle/propriété par défaut, qui inclut les propriétés abrégées par défaut.
- Cela implique un héritage qui est un peu plus compliqué.
Héritage
Remarque: le panneau "style" des outils de développement de Chrome affiche un ensemble de règles, car une ou plusieurs règles de cet ensemble sont appliquées au noeud DOM actuellement sélectionné . Je suppose que, par souci d'exhaustivité, les outils de développement affichent les règles de cet ensemble, qu'elles soient appliquées ou non.
Dans le cas où une règle est appliquée à l'élément sélectionné en raison de l'héritage (c'est-à-dire que la règle a été appliquée à un ancêtre et que l'élément sélectionné en a hérité), chrome affichera à nouveau l'ensemble du jeu de règles.
Les règles qui sont appliquées à l'élément sélectionné apparaissent en texte normal.
Si une règle existe dans cet ensemble mais n'est pas appliquée car il s'agit d'une propriété non héritable (par exemple, la couleur d'arrière-plan), elle apparaîtra sous forme de texte grisé/estompé.
voici un article qui donne une bonne explication - (Remarque: l'élément pertinent se trouve au bas de l'article - figure 21 - Malheureusement, la section pertinente n'a pas de titre) - http://commandlinefanatic.com/cgi -bin/showarticle.cgi? article = art033
Extrait de l'article
Ce [scénario d'héritage] peut occasionnellement créer un peu de confusion, car default propriétés à court terme; La figure 21 illustre le raccourci par défaut propriétés de la propriété font avec le non hérité Propriétés. Juste être conscient du contexte que vous regardez quand examiner des éléments.
Cela signifie que la règle a été héritée, mais ne s'applique pas à l'élément sélectionné:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
Le volet contient uniquement des propriétés issues de règles directement applicables à l'élément sélectionné. Pour afficher les propriétés héritées, cochez la case Afficher les propriétés héritées. Ces propriétés seront affichées dans une police grisée.
Exemple en direct: inspectez l'élément contenant le texte "Hello, world!"
div {
margin: 0;
}
div#foo {
margin-top: 10px;
}<div id="foo">Hello, world!</div>Michael Coleman a la bonne réponse. Je veux juste ajouter une image simple pour aller avec elle. Le lien qu'il a inclus a cet exemple simple: http://commandlinefanatic.com/art033ex4.html
Le HTML/DOM ressemble à ceci ...
Le volet Styles de Chrome ressemble à ceci lorsque vous sélectionnez l'élément p ...
Comme vous pouvez le constater, l'élément p hérite de ses ancêtres (les div). Alors pourquoi le style background-color: blue est-il grisé? Parce qu'il fait partie d'un ensemble de règles comportant au moins un style pouvant être hérité. Ce style héritable est text-indent: 1em
background-color:blue n'est pas héritable, mais il fait partie de l'ensemble de règles contenant text-indent: 1em, qui est héréditaire. Les développeurs de Chrome voulaient être complets lors de l'affichage des ensembles de règles. Toutefois, pour distinguer les styles de l'ensemble de règles qui peuvent être hérités de styles qui ne le sont pas, les styles qui ne sont pas hérables sont grisés.
Cela se produit également si vous ajoutez un style via l'inspecteur, mais que ce nouveau style ne s'applique pas à l'élément que vous avez sélectionné. En général, les styles affichés ne concernent que l'élément sélectionné. Le gris indique donc que le style que vous venez d'ajouter ne sélectionne pas l'élément qui a le focus dans le navigateur DOM.
Cela signifie que la règle a été remplacée par une autre règle avec une priorité plus élevée. Par exemple, les feuilles de style avec:
h2 {
color: red;
}
h2 {
color: blue;
}
L'inspecteur affichera la règle color:red; grisée et color:blue; normalement.
Lisez sur Héritage CSS pour savoir quelles règles sont héritées/ont une priorité plus élevée.
MODIFIER:
Mixup: les règles grisées sont les règles non définies, qui utilisent une feuille de style par défaut spéciale qui est appliquée aux éléments tous (les règles qui rendent l'élément rendu, car tous les styles doivent avoir une valeur).
Lors de l'utilisation de Webpack, toute règle ou propriété CSS modifiée dans le code source est grisée lorsque la page est rechargée après une reconstruction. C'est vraiment énervant et m'a obligé à recharger la page à chaque fois.
Je réponds longtemps après que la question a déjà reçu de nombreuses réponses correctes, car j’ai rencontré un cas différent, à savoir un bloc de code CSS grisé et non modifiable dans Chome DevTools: le bloc en question contenait U + 200B caractères ZERO WIDTH SPACE . Une fois ceux-ci trouvés et supprimés, je pouvais éditer à nouveau le bloc dans Chrome DevTools. On peut supposer que cela pourrait arriver aussi avec d'autres personnages non-ASCII, je n'ai pas essayé de comprendre cela.
La nouvelle version de chrome developer indique d'où il provient.