Qu'est-ce que cela signifie lorsqu'une règle CSS est grisée dans l'inspecteur d'éléments de Chrome?

249

J'inspecte un h2élément sur une page Web à l'aide de l'inspecteur d'élément de Google Chrome et certaines des règles CSS - qui semblent être appliquées - sont grisées. Il semble qu'une barre barrée indique qu'une règle a été remplacée, mais qu'est-ce que cela signifie lorsqu'un style est grisé?

Rob Sobers
la source

Réponses:

96

Pour moi, les réponses actuelles n'expliquent pas suffisamment le problème, donc j'ajoute cette réponse qui, espérons-le, pourrait être utile à d'autres.

Texte grisé / grisé, peut signifier soit

  1. c'est une règle / propriété par défaut que le navigateur applique, qui inclut des propriétés abrégées par défaut.
  2. Cela implique un héritage qui est un peu plus compliqué.

Héritage

Remarque: le panneau "style" des outils de développement Chrome affiche un ensemble de règles, car une ou plusieurs règles de l'ensemble sont appliquées au nœud DOM actuellement sélectionné. Je suppose que, par souci d'exhaustivité, les outils de développement affichent toutes 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 actuellement 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 des règles.

Les règles qui sont appliquées à l'élément actuellement 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é / grisé.

voici un article qui donne une bonne explication - (Remarque: l'élément pertinent est 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 parfois créer un peu de confusion, car les propriétés abrégées par défaut; la figure 21 illustre les propriétés abrégées par défaut de la propriété font ainsi que les propriétés non héritées. Soyez simplement conscient du contexte que vous regardez lorsque vous examinez des éléments.

Michael Coleman
la source
10
L'énoncé «règles héritées mais non appliquées , elles apparaîtront sous forme de texte grisé / grisé» est faux. S'ils ne sont pas appliqués, ils seront barrés. J'ai mis à jour ma réponse avec une capture d'écran et un exemple en direct.
Rob Sobers
10
C'est la bonne réponse !!! La phrase clé est ... "Si une règle existe dans cet ensemble mais n'est pas appliquée parce que c'est une propriété non héritable (par exemple la couleur d'arrière-plan), elle apparaîtra sous forme de texte grisé / grisé."
Niko Bellic
C'est certainement la bonne réponse. Si une propriété grisée apparaît dans une section qui dit "Hérité de [sélecteur]", alors c'est une propriété non héritable qui n'est pas appliquée à l'élément en cours. Toute propriété barrée a été remplacée par un style plus spécifique.
onlynone
1
Si les règles sont grisées lorsqu'elles ne sont pas héritables, pourquoi mon élément div a-t-il des règles de "largeur" ​​grisées? La largeur n'est-elle pas héritable? Je pose cette question sérieusement, au fait.
moosefetcher du
1
... Donc, si vous voyez Chrome griser des règles CSS qui sont très bien appliquées - où vous pouvez les décocher (ou modifier leurs valeurs) et voir un changement correspondant sur la page - il se peut que la règle affecte l'élément mais n'est pas appliqué à cet élément en particulier, mais à un parent.
Ben Wheeler
82

Cela signifie que la règle a été héritée, mais n'est pas applicable à l'élément sélectionné:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

Le volet contient uniquement les propriétés des règles qui sont directement applicables à l'élément sélectionné. Afin d'afficher en plus les propriétés héritées, cochez la case Afficher hérité. Ces propriétés seront affichées dans une police grisée.

les règles grisées sont héritées des ancêtres

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>

Rob Sobers
la source
13
@Rob Pour être précis, lorsqu'un style est grisé, cela signifie qu'il a été hérité d'un autre élément englobant mais n'est pas applicable à l'élément sélectionné . Dans la documentation: "Le volet contient uniquement les propriétés des règles qui sont directement applicables à l'élément sélectionné. Pour afficher en plus les propriétés héritées, cochez la case Afficher hérité. Ces propriétés seront affichées dans une police grisée."
drkvogel
2
@RobSobers Malheureusement, je ne pense pas que votre exemple démontre l'héritage. D'où est le parent ancêtre dont la div hérite? Si vous faites défiler vers le bas dans le volet Styels dans Chrome, vous verrez des sections intitulées "Hérité de ..." Que signifient les règles grisées? Pouvez-vous incorporer cela dans un exemple?
Niko Bellic
8
Je ne comprends pas pourquoi cette réponse est un. marqué comme la meilleure réponse et b. a tellement de votes positifs. C'est clairement faux. Les marges ne sont pas des propriétés héritables ( stackoverflow.com/a/5612360/24267 ) La réponse de Michael Coleman est la bonne. Oh, vous ne voulez pas dire hérité d'un élément ancêtre, vous voulez dire ... Je ne sais pas exactement ce que vous voulez dire.
Quoi qu'il en
3
De toute évidence, les votes sont pour une certaine magie MS Paint avec les flèches, et cet effet d'ombre de bulle. voté comme incorrect.
David
2
@ mhenry1384 "a" est facilement explicable: car il est écrit par la personne qui a posé la question.
Andrew Grimm
27

Michael Coleman a la bonne réponse. Je veux juste ajouter une image simple pour l'accompagner. Le lien qu'il a inclus a cet exemple simple: http://commandlinefanatic.com/art033ex4.html

Le HTML / DOM ressemble à ceci ...

HTML

Le volet des styles dans Chrome ressemble à ceci lorsque vous sélectionnez l'élément p ...

Volet Styles

Comme vous pouvez le voir, l'élément p hérite de ses ancêtres (les divs). Alors pourquoi le style est-il background-color: bluegrisé? Parce que cela fait partie d'un ensemble de règles qui a au moins un style héritable. Ce style héréditaire esttext-indent: 1em

background-color:bluen'est pas héritable, mais il fait partie de l'ensemble de règles qui contient text-indent: 1emqui est héritable et les développeurs de Chrome voulaient être complets lors de l'affichage des ensembles de règles. Cependant, pour distinguer les styles du jeu de règles qui sont héritables des styles qui ne le sont pas, les styles qui ne peuvent pas être hérités sont grisés.

Niko Bellic
la source
1
C'est la meilleure réponse, car elle donne une démo simple. Ouvrez cette URL dans un nouvel onglet et utilisez les outils de développement Chrome pour sélectionner les différents divs et p. Vous verrez que ce background-colorn'est pas grisé div#two. Mais background-colorest grisé pour div#threeet p.
wisbucky
grande explication
Dirk Boer
10

Cela se produit également si vous ajoutez un style via l'inspecteur, mais ce nouveau style ne s'applique pas à l'élément que vous avez sélectionné. Habituellement, les styles affichés ne sont que ceux de l'élément sélectionné, donc le gris indique que le style que vous venez d'ajouter ne sélectionne pas l'élément qui a le focus dans le navigateur DOM.

AaronLS
la source
C'était mon problème. Merci!
Chuck Le Butt
5

Cela signifie que la règle a été remplacée par une autre règle de priorité plus élevée. Par exemple, des feuilles de style avec:

h2 {
  color: red;
}
h2 {
  color: blue;
}

L'inspecteur montrera la règle color:red;grisés et color:blue;normalement.

Lisez sur l' héritage CSS pour savoir quelles règles sont héritées / ont une priorité plus élevée.

ÉDITER:

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 à tous les éléments (les règles qui rendent l'élément rendu, car tous les styles doivent avoir une valeur).

tcooc
la source
Je viens de tester cela et je pense que c'est incorrect. Dans le cas où une règle est remplacée, il y aura une barrure (comme ma question l'indique). Voir: yfrog.com/f/j3fooep
Rob Sobers
@Rob: eu un mélange depuis devtools ne démarre pas. Je l'ai fait fonctionner et j'ai modifié ma réponse avec ma réponse testée .
tcooc
Je ne suis pas entièrement sûr que ce soit correct non plus; les règles fanées sont celles que j'ai définies dans ma propre feuille de styles (par exemple, font-size: 20px;)
Rob Sobers
1

Lors de l'utilisation de webpack, toute règle ou propriété css qui a été modifiée dans le code source est grisée lorsque la page se recharge après une reconstruction. C'est vraiment ennuyeux et m'a forcé à recharger la page à chaque fois.

user2528531
la source
0

entrez la description de l'image ici

La nouvelle version du développeur Chrome montre d'où il est hérité.

jmojico
la source
0

Je réponds longtemps après que la question a déjà de nombreuses réponses correctes car j'ai rencontré un cas différent d'avoir un bloc de code CSS grisé et non modifiable dans Chome DevTools: Le bloc en question contenait des caractères U + 200B ZERO WIDTH SPACE . Une fois que je les ai trouvés et supprimés, je pouvais à nouveau modifier le bloc dans Chrome DevTools. Vraisemblablement, cela pourrait se produire avec d'autres personnages non-ascii, je n'ai pas essayé de le comprendre.

davidreedernst
la source