CSS background gradient validation

Question

I've got a number of CSS styles in my site's stylesheet that use the following, or variations of:

background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.0, #585858),
    color-stop(1.0, #ACACAC)
);
background: -moz-linear-gradient(
    center bottom,
    #585858 0%,
    #ACACAC 100%
);

My problem is that when it comes to validating the CSS using the W3C Validator, I get the following error:

Value Error : background -webkit-gradient(linear,left bottom,left top,color-stop(0.0,#585858),color-stop(1.0,#acacac)) is not a background value : -webkit-gradient(linear,left bottom,left top,color-stop(0.0,#585858),color-stop(1.0,#acacac)) -webkit-gradient(linear,left bottom,left top,color-stop(0.0,#585858),color-stop(1.0,#acacac))

As far as I'm aware, the CSS is fine...is this a problem with the validator I should make the testing team I work with aware of?

Grunenwald

Answer 1

You are using vendor specific experimental implementations of CSS properties. They aren't valid CSS.

One of the options for the validator will allow you to downgrade vendor extensions from errors to warnings in the reports (so if you are choosing to use them on a production site you can find any errors that aren't related to using non-standard extensions).

Chappie

Ah, yes...forgot to add. I've turned off the vendor specific warnings and it still throws the error. – Grunenwald

Validation has become pointless for CSS now that there are so many draft standards flying around. It's useful for catching obvious errors (i.e. missing colons) but for anything else it's useless. – Halogenate

@Rich Bradshaw W3C CSS3 Validator is not even good for catching obvious errors because it's filled with bugs and outputs a lot of garbage in reports. – Vibraphone