web element inspector (safari / chrome) dimmed css properties

Question

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

Answer 1

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

Answer 2

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

Answer 3

For me it was just a charset mixing problem.

The HTML file itself and one of the CSS files were encoded as UTF-8 with BOM, while other CSS file was encoded as ANSI. I still cannot figure out how Chrome managed to show almost everything right. I switched all of the files back to UTF-8 without BOM and the problem was solved. Thanks to the W3C validator that hinted me on the presence of the BOM.

Hope this helps at least someone else.

Answer 4

Are you also getting "interpreted as image but transferred with mime type text/css" ? I was.

This solved it: Chrome interprets CSS Stylesheet as image

Basically, if your css file has 'background: url()' or 'background: url("")' in it, just comment them out or delete them (or you know, just put a path in there) The page should then load with the css styles in chrome inspector back as active.