What does it mean when a CSS rule is grayed out in Chrome's element inspector?
For me the current answers didn't explain the issue fully enough, so I am adding this answer which hopefully might be useful to others.
Greyed/dimmed out text, can mean either
- it's a default rule/property the browser applies, which includes defaulted short-hand properties.
- It involves inheritance which is a bit more complicated.
Inheritance
Note: Chrome dev tools "style" panel will display a rule set, because one or more rules from the set are being applied to the currently selected DOM node.
I guess, for the sake of completeness, dev tools shows all the rules from that set, whether they are applied or not.
In the case where a rule is applied to the currently selected element due to inheritance (i.e. the rule was applied to an ancestor, and the selected element inherited it), chrome will again display the entire ruleset.
The rules which are applied to the currently selected element appear in normal text.
If a rule exists in that set but is not applied because it's a non-inheritable property (e.g. background color), it will appear as greyed/dimmed text.
here is an article that give a good explanation - (Note: the relevant item is at the bottom of the article - figure 21 - unfortunately the relevant section doesn't have a heading) -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033
Excerpt from the article
This [inheritance scenario] can occasionally create a bit of confusion, because defaulted
short-hand properties; figure 21 illustrates the defaulted short-hand
properties of the font property along with the non-inherited
properties. Just be aware of the context that you're looking at when
examining elements.
Chrome developer tools Style tab showing faded CSS definition, why?
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.
What does it mean when Chrome Dev Tools shows a computed property greyed out
NB: This answer has no solid evidence, it's based on my observations along the time.
The gray calculated properties are neither default, nor inherited. This only occurs on properties that were not defined for the element, but calculated from either its children or parent based on runtime layout rendering.
Take this simple page as an example, display
is default and font-size
is inherited:
<style>
div { font-size: 13px; }
</style>
<div>
<p>asdf</p>
</div>
In this particular example, height
is calculated from <p>
's children - text node (font size plus line height), width
is calculated from its parent - <div>
's width, which is also calculated from its parent <body>
.
EDIT: Well I thought again, here's my opinion based answer. I should really go and take a look at Chromium source code later :D
By expanding those arrows, you could see which actual rule is applied to the element, among all those defined against it (either directly or inherited, either by developer or browser):
Here you can trace down to every definition even including browser built-in rules, and check with the CSS cascading (overriding) mechanism.
So, for those elements that have no CSS definition (no directly defined, no inherited, no browser built-in), you don't have any source to trace. And the property values are totally runtime calculated.
If you check Show all, more grayed properties are shown. These are not defined anywhere either. But unlike those in previous screenshots, these are not runtime calculated - they are CSS spec default value.
What does semi-transparent CSS properties mean in Google Chrome Dev Tools?
I believe they are semi-transparent because they're not explicitly defined.
Consired following sheet:
selector1 {
margin: 20px;
}
selector2 {
margin: 20px;
margin-top: 10px;
}
selector3 {
margin: 10px 20px 30px;
}
In first example (selector1
) all margin-*
properties will be semi-transparent because non is explicitly defined - shortcut is being used.
In second example (selector2
) only margin-top
will be fully opaque, as it's defined in its own property.
In last example (selector3
), margin-top
and margin-bottom
are defined explicitly, therefore the will be fully opaque. However margin-left
and margin-right
are defined by a single value, so they will be semi-transparent.
Semi-transparent color is also applied to default values, for instance:
background: red url(...) no-repeat;
This property defined background-color
, background-image
and background-repeat
explicitly, however background-position
, background-clip
, background-size
etc. are not defined (default values are used) so they will be seen as semi-transparent.
Related Topics
Pseudo Element Across Multiple Lines to Create a Continuous Underline Animation
Fill Parent Container and Reduce Image Resolution with Next/Image
How to Get Page Content to Stretch and Stick Footer to Bottom of Page
How to Create a Button (Or Div) with a Border That Has a Gradient and Has Rounded Corners
Overflow with Absolute/Relative Positioning Layout
@Font-Face with Embedded Font Does Not Work
Image Downscaling with CSS … Images Are Blurry in Several Browsers
Why Is Themeprovider (Material UI) Not Working for Me Here
How to Center Text Horizontally and Vertically in Cojunction with 'Writing-Mode: Sideways-Lr'
Characters from Embedded Google Fonts Not Showing Up in Firefox 4 and Ie9
How to Customize The Editorfor CSS with Razor
Why Use Media Query Type "All" When It's Implied
Best Tool for Testing Ie from a MAC - Without a Pc
Internet Explorer 8 and Checkbox CSS Problem