52

I've been using Chrome for a long time now and I've never (well not that I can recall) come across CSS definitions in the Style panel that are faded. The selector hasn't been defined else where.

Example:

enter image description here

(Edit: Just to be clear, I'm not referring to the user agent stylesheet)

I can't figure out why it is faded and what this means. The definition appears to be editable but any changes to the values do not persist (i.e. as soon as I click off, it reverts back to original value) and has no effect on the web page.

I couldn't find any reference to this in the documentation for the tool. Can any of you kind folk shed any light on this?

Brett
  • 19,449
  • 54
  • 157
  • 290
Raj Parmar
  • 981
  • 1
  • 10
  • 13
  • Almost 6 years after asking this question, I've noticed now that the problem I encountered was fixed in later versions of Chrome. The answers below received about why it's faded appear to be correct but in my case I couldn't work out why it was happening to begin with. Turned out to be invalid CSS in definitions before the CSS in the example. (See: http://jsfiddle.net/bdfEV/). The example in the fiddle no longer shows as faded in the current version of Chrome (which appears to now allow spaces in link selectors e.g. "a: hover"). – Raj Parmar Jun 11 '18 at 15:37

4 Answers4

16

Rules that are faded are not applied to the element.

Take a look at this example 

<!-- HTML -->
<div>
  <span>Test</span>
</div>

/* CSS */
div {
  color: #F0F;
  margin: 15px;
  stroke: #FFF;
  float: left;
}

If you open dev tools, you will notice that margin and float are faded, color and stroke are not. That is because span element inherited style rules from its parent, but only color and stroke rules are inheritable.

dev tools

Buksy
  • 11,571
  • 9
  • 62
  • 69
15

The "faded" styles are ones that are not applied to the selected tag. So in your screenshot, you have an h1 rule which is normal colored -- that one is applied to whatever element you have selected -- and you have an .SubHeader h1 rule that is not being applied to the selected element.

You'll sometimes see this if you dynamically add a CSS rule (the + button in the chrome dev tools) but modify the selector so it doesn't apply to whichever element you have selected.

Thomas David Kehoe
  • 10,040
  • 14
  • 61
  • 100
Roddy of the Frozen Peas
  • 14,380
  • 9
  • 49
  • 99
  • 2
    Does Chrome display a rule for an element even if it doesn't match its selector? If so, that'd be weird... – BoltClock Oct 08 '12 at 15:22
  • 1
    Chrome allows you to add and modify CSS rules dynamically. If you happen to add a rule that doesn't match your selected element -- or if you modify an existing rule so the selector no longer matches the selected element -- it will show greyed out. – Roddy of the Frozen Peas Oct 08 '12 at 15:26
  • 1
    I follow what you're saying Roddy however, the style in question (.SubHeader h1) hasn't been added dynamically (i.e. it's in the stylesheet and is definitely in effect (i.e. styled as defined). So it is being applied, just Chrome is not letting me modify it. – Raj Parmar Oct 08 '12 at 15:35
  • Did you try restarting Chrome? That sometimes happens to me for no reason that I can determine -- Chrome just spontaneously decides that it won't let me edit a particular CSS rule. – Roddy of the Frozen Peas Oct 08 '12 at 15:40
  • @RajParmar can you reproduce your issue (fiddle) and give us the link? – Christoph Oct 08 '12 at 16:29
  • 1
    Hi Christoph, I've managed recreate it and in the process found what could be causing it but not 100% sure. I found some invalid CSS defined in the same stylesheet which might be causing the problem. See here: http://jsfiddle.net/bdfEV/ – Raj Parmar Oct 09 '12 at 09:23
  • @RajParmar - Yes, it looks like the invalid markup on the link selectors was causing it. Very odd. I've never seen anything like it. I bet it's a Chrome bug -- you should probably submit a bug report and include your Fiddle as proof. – Roddy of the Frozen Peas Oct 09 '12 at 13:58
9

It means that the rule has been inherited:

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

Roee Yossef
  • 455
  • 5
  • 16
4

These are the stylesheets that are applied automatically by the browser.

You can see this by the description: user agent stylesheets.

You can disable this in the setting in the lower right corner by checking Show user agent styles. Now the styles won't be shown in your CSS panel (but are still being applied!)

EDIT:

i misread your question, the dev doc says the following about dimmed rules:

Note: If you edit the selector so that it will not match the selected element, the rule will turn dimmed and obviously, will not be applied to the element. You should rarely need to do this.

Your screenshot looks like this could have been the case.

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • And why does it display *Site.css* as source next to them? – Michal Klouda Oct 08 '12 at 14:42
  • 1
    mmh no, they're under "Matched CSS Rules", you're talking about "Computed Style" which are shaded too, but it's not what OP is talking about. – Giona Oct 08 '12 at 14:43
  • mmh no again, the default color for `h1`s isn't #7F7F7F – Giona Oct 08 '12 at 14:46
  • Hi Christoph, as the others have pointed out, I know about the user agent styles. Perhaps I wasn't clear, but I'm referring to the styles from my own stylesheet (Site.css) which are shaded/faded. – Raj Parmar Oct 08 '12 at 14:58
  • @Christoph I appreciate what you say but I have not edited anything in the browser at the point the screenshot was taken, if I did, I can understand the reasoning for the fading but this is as loaded. – Raj Parmar Oct 09 '12 at 08:02