CSS3 and validation – The headache edition

So for the very small numbers of people that read this, you will know I have recently been updating my personal buisness website in HTML5 and CSS3. As with all sites designed these have to pass through strick validation according to W3C guidelines. However the problem arises when using CSS3 as it’s still in the experiemental phases and therefore will not pass through validation properly.

There is two ways around this, you could either: Hold off from using it, or you could just move all of the CSS3 code to a serperate file, call it something obvious like css3.css.

As long as your normal code is valid (without hacks or errors) then it will pass CSS3 validation. Your css3.css file though will not, and this will continue to be the case until such a time as it is officially supported and released out of experimental phase by the W3c.

Always make sure when using CSS3 that you use fallbacks for unsupported browsers. For example if you have a background gradient, just make sure there is a normal background colour associated with it. For example:

header {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #cecece));
background: -webkit-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: -o-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: linear-gradient(top, #ffffff 0%, #cecece 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cecece', GradientType=0 );

Hopefully this will help when you are trying to get your CSS3 to validate at it just won’t play ball.