Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
add comment

4 Answers

up vote 8 down vote accepted

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.

share|improve this answer
    
+1 for sharp answer –  Dave Dec 21 '10 at 16:51
    
All really good answers, you've all helped me out! Many thanks :) –  mickburkejnr Dec 21 '10 at 23:22
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
Good catch. Using vendor prefixes makes validation fails automatically (despite they are stated on specs since CSS 2.0). –  Dave Dec 21 '10 at 19:16
add comment

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 dosen't support some of the things that background-size. See this link for more compatibility details.

CSS3 Compatibility.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.