what does the yellow color warning icon mean in the chrome web inspector?

Question

what does the yellow color warning icon in the chrome web inspector imply?

Everything is working fine and there doesn't seem to be any errors whatsoever though..

Answer 1

According to the Chrome Developer Tools documentation, a CSS warning icon means that Chrome doesn't understand the CSS rule. Chrome ignores these rules.

http://code.google.com/chrome/devtools/docs/elements-styles.html#styles_view

This may mean there is a problem with your CSS, or it may perfectly fine and expected behavior.

In the common case where you include browser specific CSS that Chrome should ignore, chrome will warn you about the rule, while other browsers will follow the rule. That's not the case with the example CSS presented in the question, which needs to be fixed.

Answer 2

It means there is something wrong with the property or its value (or, that it's unrecognized).

border-top-color: rgba(0, 0, 0, 0.5)px is clearly wrong - the px should not be there.

As another example, -moz-transition will trigger the same warning, because WebKit does not recognize it.