views:

52

answers:

3

Silly web element inspector (safari / chrome) question, but I can't seem to figure out why some properties are dimmed.

element inspector

+1  A: 

After looking at it on the link you provided, the faded (dimmed) ones are the style rules that don't have any browser operations linked to them, for example:

Click the little arrow next to background: you get a list of rules that Chrome uses to interpret your CSS.

On float and height, there is pretty much only one way that can be interpreted and so Chrome doesn't need to add any browser specific styles to make it display as intended.

Hope that helps to explain it :)

Faded rules are rules that don't need any special attention from the browser :)

Kyle Sevenoaks
It seems to be something else. On the apple website the float:left; property is dimmed / faded. When you go to http://webkit.org/ and inspect the 'download nightly build' button the float right property isn't dimmed / faded.
Lezz
Well that is an interesting one.. It could possibly be corrected tags? But I doubt that.
Kyle Sevenoaks
I have no idea, I have been digging around as much as I can on the internet for the past hour and can't come up with anything. I would love to know the reasons behind this faded css rules!!
Kyle Sevenoaks
A: 

Just a guess - but did you check if it ain't just a way to easily distinguish computed styles?

Knu
+3  A: 

According to source Webkit inspector apply 50% opacity to css styles that are "inherited" or "implicit", from inspector.css

.styles-section .properties .implicit, .styles-section .properties .inherited {
    opacity: 0.5;
}
  • Implicit are the one that are under a composite property like border: 1px solid red color: red will be grayer.
  • Inherit are the ones with the explicit "inherit" value.

Now the current chrome version seem to color gray some other values, too bad the inspector on the inspector is not working anymore :(

VirtualBlackFox