Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome dev tools showing a CSS rule on a grey background. Why?

Tags:

Just to be clear - I'm not talking about a property being 'greyed out' or struck through; This is a whole CSS rule displayed normally, but on a grey background. Other applied rules display normally, without a grey background. Does anyone know what a grey background means?

The reason I'm asking is, despite the properties not being greyed out or struck through, the rule does not appear to get applied. I'm hoping the grey background is significant and that significance might explain why the rule is not being applied.

Edit
I've been told I should edit the question to make it clear why it's not a duplicate of the question above. I can only repeat that I'm not asking about greyed-out properties; I'm asking about a CSS rule displayed on a grey background. That was what I specified in the original question, above. If you look at the accepted answer to that question you'll see the user was asking about greyed-out CSS properties (why would he accept that answer otherwise?)
Any chance someone could remove the 'duplicate' reference?

CSS rules, some on a grey background

like image 960
moosefetcher Avatar asked Aug 23 '17 14:08

moosefetcher


2 Answers

According to the old Chrome Developer site:

For the currently selected DOM node, this pane displays all the styles applicable to this node. Styles with gray background are read-only, the rest are editable.

The old site suggests I visit the new Chrome Dev Tools site, but the only language that looks similar/relevant is slightly less clear:

Live-edit style property names and values in the Styles pane. All styles are editable, except the ones that are greyed out (as is the case with user agent stylesheets).

So those greyed out styles are not editable, and my guess is because they are the default styles for those elements from your user agent stylesheet.

like image 132
TylerH Avatar answered Oct 10 '22 13:10

TylerH


Those entries with gray background are not editable due to a bug/deficiency (reopened here): Chrome's devtools cannot edit dynamically created CSS rules (e.g. via insertRule method).

like image 37
wOxxOm Avatar answered Oct 10 '22 13:10

wOxxOm