带有图像和扩展渐变的背景的CSS属性值无效

Question

Chrome has started to warn me about my legacy gradients:

Invalid CSS property value: right no-repeat url('../Images/Logo_white.png'), 
-moz-linear-gradient(bottom, #899fa6, #3e545c) 

It is only for the extensions for o, moz and ms:

background: right no-repeat url('../Images/CompanyLogo.png'), 
-moz-linear-gradient(bottom, #000000, #ffffff);

The one for webkit is fine:

background: right no-repeat url('../Images/CompanyLogo.png'), 
-webkit-linear-gradient(bottom, #000000, #ffffff);

Am I doing something wrong?

The extension-gradients do not generate a warning when they are used alone as opposed to being combined with an image.

Answer 1

The reason why you're getting warnings from Chrome's dev tool is because the values are indeed invalid for Chrome. However, this should not alarm you because this is the way that it was designed.

In CSS, if something is defined incorrectly or not recognized by the browser then it is simply passed over, nothing is done and it only gives a warning not an error. This behavior is exactly what allows vendor prefixes to work. Take for example your own situation:

background: right no-repeat url('../Images/CompanyLogo.png'), 
-moz-linear-gradient(bottom, #000000, #ffffff);

background: right no-repeat url('../Images/CompanyLogo.png'), 
-webkit-linear-gradient(bottom, #000000, #ffffff);

background: right no-repeat url('../Images/CompanyLogo.png'), 
linear-gradient(bottom, #000000, #ffffff);

Chrome goes through each background property and sees which one it can interpret. It can't interpret the first gradient because it doesn't recognize -moz- like Firefox does. It can interpret the second one because it has a -webkit- prefix. It can also interpret the third background because Chrome supports un-prefixed CSS gradients.

Since more than one CSS attributes affect the same thing ( background ), the most recent one listed (the unprefixed version) will be used. A warning will display for the un-interpretted first background , but it will have no effect on the project.

Yes, warnings should be looked at and analyzed, generally treated as errors . With that being said, the case you bring up about browser prefixes is the correct way of doing it, so the warnings should be accepted. In a perfect world they would not show up at all, they'd understand that it is meant for another browser, but there is no reason to worry about it because it is indeed the correct way of doing it

But then again, this is all semi irrelevant because all major browsers support CSS gradients unprefixed .

Answer 2

I found this bug on Chrome Developer Tools:

http://code.google.com/p/chromium/issues/detail?id=309982

Seems like they will temporarily disable CSS warnings because of too many false positives (including valid CSS for legacy browsers, if we are to go by the ticket author) until they have fixed it.

Chances are that these warnings are part of those false positives. I will monitor the issue.