1

A screenshot of a piece of the CSS debugger that comes up in the developer tools:

enter image description here

This answer describes what the strikeout means: "the crossed-out style was applied, but then overridden by a more specific selector, a more local rule, or by a later property within the same rule."

What does the light text mean? Where is there official documentation on this?

dfrankow
  • 20,191
  • 41
  • 152
  • 214

1 Answers1

2

Dimming indicates this property is not inheritable per CSS specification, i.e. it doesn't apply to the inspected element.

The dimmed declaration applies only to body in your screenshot.

Your screenshot says "Inherited from body" which means body is the ancestor of the inspected element and its non-dimmed properties are inheritable e.g. font-family or color. Those of them that aren't crossed are actually inherited by your inspected element.

P.S. A list of all inheritable properties: link.

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
  • Can you give an example? I bet your answer is technically correct, but I still find it hard to understand, because I'm not as deeply in it as you are. – dfrankow Jan 26 '23 at 22:50
  • "respective ancestor element in the DOM tree" is hard to read. Show the smallest example possible: the simplest doc, and a tag that doesn't inherit, I guess. Or not, as you choose. – dfrankow Jan 26 '23 at 22:59
  • "In this case, the 'body' tag cannot inherit the 'margin' tag, because XYZ." Is that right? If so, what's the xyz? That would be an example. – dfrankow Jan 26 '23 at 23:59
  • These are exactly the sentences that should be in the answer. "In this case, you are inspecting a tag that is inside a body tag. The tag you are inspecting (not shown) cannot inherit the dimmed properties of margin and background-color." – dfrankow Jan 27 '23 at 00:21
  • It's not just CSS inheritance (which I understand at a high level, but not all the details), but the chrome interface, which I'm not incredibly familiar with. That's literally the question, what is the chrome interface saying. – dfrankow Jan 27 '23 at 00:27
  • Ah, then I guess there were two questions here. The other one was about the meaning of "Inherited from body" section. – wOxxOm Jan 27 '23 at 00:30
  • Ha ha, I literally did not see that text until you just mentioned it! The UI has so much I didn't notice it. – dfrankow Jan 27 '23 at 13:56