CSS3 Validation: Is it worth it?

Question

I'm currently building a project, and I'm writing the site using HTML5 and CSS3. I have validated the HTML and it passed first time (very pleased as it was my first time coding HTML5!). And then I went to validate the CSS. It failed validation. The validator indicated that the browser specific attributes in my code (gradient properties for use in Mozilla, Webkit, and Opera) had failed the validation.

This leaves me in a bit of a catch 22 situation. I would like both the HTML and CSS to validate, but the whole point of using CSS3 for me was so that I could use gradients without cutting up images, as well as rounded corners. I have included the standard CSS3 rule for gradients and rounded corners, but as the new best and brightest browsers don't yet fully support it, I feel I should use these browser fixes.

Should I ignore the validation result? Would it make a difference to my site on a usability and SEO point of view?

Answer 1

Since CSS3 is not a completed spec and probably won't be for a while validating it is really a point in futility. If you want to use the new CSS features you're going to have to accept that your CSS isn't technically valid.

Invalid CSS doesn't affect usability since users have no idea what CSS is much less if it's valid. As long as the results rendered in their browser don't inhibit their ability to use the site then you're fine (this applies to anything, not just CSS).

And valid/invalid CSS has no effect on SEO whatsoever.

Answer 2

Keep in mind that CSS3 as well as HTML5 are still under development, so what is said to valid today can be no more tomorrow and vice-versa.

But this is no reason to not use it if your concerns are usability and SEO. @John Conde gave a clear idea about that.

You just need to make sure relative old browsers (there are many developers and entities dropping IE6 support. Check your intended audience) can display the website decently.

Yeah, also keep in mind that your site doesn't need to display the same in every browser/platform. Just need to be decent. Who has better browsers will see better gradients, rounded corners, nice shadows, nice fonts...

Last point I want to talk about is vendor extensions (-moz, -webkit, -o, -ms...). They are a valid way to use properties under testing, not fully supported (sometimes this is because spec isn't really stable yet). Using them along with the proper fallback rules should lead you to a valid code tomorrow, once the final rule will override the invalid/experimental-implementation ones.

Answer 3

Good answers so far. Like John mentioned, the CSS wouldn't have any effect on SEO, doesn't even look at what's actually in the .css file (something to keep in mind when using css background images if the image is actually contextual).

As Dave said, both CSS3 and HTML5 are still getting developed, and validating an HTML5 document on http://validator.w3.org/ even gives you a disclaimer in the results:

The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.

To get some of the attributes you're going after with the CSS, you'd have to use the vendor extentions to get them working correctly, and if they're detected you'll automatically fail the validation, unless I'm mistaken.

Answer 4

Browsershots is a cracking website to see how your site would display. But, as it was said, CSS3 and HTML5 are still being developed. Also, IE doesn't support some of the things that background-size.