5

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

Community
  • 1
  • 1
moosefetcher
  • 1,841
  • 2
  • 23
  • 39
  • 1
    Does the grayed out box say: "user agent stylesheet"? Could you add a image showing the grayed out box? – caramba Aug 23 '17 at 14:17
  • @Paulie_D: Makes you wonder if this is the same question they asked in a comment under that question [10 months ago](https://stackoverflow.com/questions/3265555/what-does-it-mean-when-a-css-rule-is-grayed-out-in-chromes-element-inspector#comment67269262_28845974). *Edit:* no it's not. – BoltClock Aug 23 '17 at 14:27
  • Just to confirm that this indeed NOT a duplicate of the question referenced above. As I clearly stated, this is NOT about greyed out properties. This is css rules displayed on a grey background. Image now attached. As you can see, one is marked as 'user agent stylesheet' but another is marked 'style..style'. Any help, much appreciated. – moosefetcher Aug 23 '17 at 15:01
  • Which grey area in your image are you referring to, the 'user agent stylesheet' one or the 'style..style' one? – j08691 Aug 23 '17 at 16:03
  • @Paulie_D This is a different question entirely. – TylerH Aug 23 '17 at 18:33
  • @moosefetcher When I test, I only see the grey background for user agent stylesheet. Where is `.ci-act-status-details` declared? In the `` of your document? Or on an external stylesheet? – TylerH Aug 23 '17 at 18:42
  • .ci-act-status-details is declared in an external stylesheet, so I don't understand why that file (app-styles.css) is not referenced where it says 'style...style'. Oddly I've just checked it again today and it is not being displayed on a grey background (although in the image above you can see it was). I'd still like to know the reason. – moosefetcher Aug 24 '17 at 07:33

2 Answers2

2

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • 2
    Thanks for the answer. It's good to know these styles are not editable. But the rule in question is defined in an external stylesheet. I'd really like to know why these styles a) aren't editable and b) weren't being applied. – moosefetcher Aug 24 '17 at 07:38
  • @moosefetcher In order to determine why a rule is not applied, we'll need to see a [mcve]. But unless Chrome has a bug in it, styles *are* applied if they are not struck through. – TylerH Aug 24 '17 at 14:04
  • 1
    Irrespective of whether the styles are applied, why is the rule (which is defined in a custom external css file) described as style...style? I've just now encountered yet ANOTHER example of this and would really like to know the line number of the rule, as I'd like to edit it. Why (and where) does Chrome 'hide' the line number? – moosefetcher Sep 07 '17 at 13:55
  • @moosefetcher If you have an external stylesheet, I'm not sure why Chrome is listing it as appearing in the `` element within ` – TylerH Sep 07 '17 at 14:01
  • Yes, I can. But if possible I'd also like to know the presumably sensible reason for obscuring the exact info I need. A bit frustrated, I guess. – moosefetcher Sep 07 '17 at 14:05
  • @moosefetcher Chrome only shows line numbers for uploaded CSS files; it does not show them for local files. I guess the rationale is that if it's a local file, that means you'll have access to it and can open up the file itself to look with ease. Firebug for Chrome might help with this. – TylerH Sep 07 '17 at 14:18
  • 2
    Well, it's mysteriously NOT doing it anymore. And yes, I am certain it was (I showed a co-worker too). All the files in the project are on a dev server. I found the line number, edited the rule. Predictably didn't work. Sometimes I hate web dev. – moosefetcher Sep 07 '17 at 14:30
2

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).

wOxxOm
  • 65,848
  • 11
  • 132
  • 136