143

Please note, not the Styles panel (I know what greyed-out means in that context—not applied), but the next panel over, the Computed properties panel.

What does it mean when a Computed property is shown greyed out?

Example:

enter image description here

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
AmbroseChapel
  • 11,957
  • 7
  • 46
  • 68
  • Possible duplicate of [What does it mean when a CSS rule is grayed out in Chrome's element inspector?](https://stackoverflow.com/questions/3265555/what-does-it-mean-when-a-css-rule-is-grayed-out-in-chromes-element-inspector) – hestellezg Sep 12 '18 at 18:08
  • **Kayce Basques** from _Google_ added this [document computed properties in devtools](https://github.com/google/WebFundamentals/issues/2444) and [updated the doc to cover grey entries](https://github.com/google/WebFundamentals/pull/2468) – cateyes Mar 25 '20 at 22:43
  • 1
    @hestellezg this is not a duplicate; this is referring to the computed – Geoffrey Hale Apr 29 '22 at 16:26

1 Answers1

92

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>

enter image description here

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

enter image description here

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.

enter image description here

Leo
  • 13,428
  • 5
  • 43
  • 61
  • 3
    That makes sense. One other detail: greyed-out properties can't be clicked on, the way the others can, to display the origin of their values in a particular declaration. – AmbroseChapel Jan 18 '16 at 04:14
  • @AmbroseChapel I thought again and updated my answer. I should really go and read the source code. Good question. – Leo Jan 18 '16 at 06:09
  • 1
    It certainly makes sense that the grey properties are `run-time calculated` since the grey properties are usually 'height' and 'width', which if you think about it, are values that depend dynamically on an element's children (e.g., amount of text and font-size of the text that is contained within the element, or the width of the parent when the element has width: 100%) – Niko Bellic Feb 07 '17 at 02:32
  • 9
    A nice CDT feature for this would be: to see how the values are calculated, means: which elements add up to the `width` style for example. – Legends Dec 11 '19 at 13:30