Epic Fail
Recently, the W3C updated their site with a new redesign. As a few people have pointed out, what’s ironic about this new release is that it fails their own CSS validation.
Now, it’s important to remember that just failing the W3C CSS validation doesn’t automatically mean you did something wrong. In fact, this site also fails with 2 errors. The question becomes: why does the site fail?
Why Validate?
Before we get into that, I think I should address why it’s important that a site pass the W3C’s validation, both for markup and CSS. The answer is simply, accessibility and reliability. With new technology coming out all the time, there needs to be a standard that sets how your site should be read and displayed, that’s what the W3C does. It’s standards extend just beyond desktop computers. Browsers exist for mobile devices, video game systems, televisions and other devices. The standard makes sure that no matter what type of device you’re viewing a site on, as long as the browser for that device is standards-compliant, your site will display reliably across them all.
Hacks
Which brings us back to why these sites are failing the CSS validation test. For my own site, one error is that I’m using the a CSS property called “word-wrap” that isn’t fully accepted yet. It’s part of the CSS3 working draft, and is supported by Firefox 3.5, Safari 4, Chrome, and IE 6+. The other error is “only screen and (max-device-width: 480px)”, which is the setting I use for the media attribute to pull in a CSS file specifically for the iPhone.
For the W3C’s site, many of their errors are due to syntax that includes properties beginning with a star (*) or an underscore (_). These are known as “hacks” to target IE browsers. The star (*) will target IE7 and below, while the underscore (_) will target IE6 and below. These are syntax tricks that only those browsers will read.
Odd Man Out
The problem I have with the hacks used here is that there is alternative way to target those browsers, that will still pass validation tests. For those of you starting out with web development, you may have noticed that the IE family of browsers has, what you might call, issues. Their interpretation of CSS differs from many of the other browsers. Microsoft knows this, and, knowing they’re they odd man out in the standards-compliance game, gave us a way to write markup that only their browsers would read. It’s referred to as the IE Conditional.
The IE Conditional is a piece of code that will most likely be used in the <head> section of your HTML file. And it looks like this:
//Special instructions for IE here
<![endif]––>
What that piece of code does is look for browsers that are IE7 or below (“lte” stands for “less than or equal to”) and applies markup just for them. Another option for the “if” would be if IE 6, which would target just the IE6 browser.
How Do I Use It?
So, what do you use this for? Mainly, this is used for linking in style sheets or Javascript files just for the IE browsers. So, what the W3C could have done was to put all those properties with hacks into separate IE7.css and IE6.css files and then include them in their HTML document using two conditionals. That way, there wouldn’t be any validation issues (at least, not with those items using hacks).
Just be sure to include the IE style sheets after your main style sheet, or they’ll be overridden.
Yeah, I was laughing at that a couple of weeks ago regarding the W3C site not validating perfectly. If you use the wayback machine, you can see primitive versions of the site absolutely filled with errors. Neat that Happy Cog / Zeldman did the new redesign though.
I usually build sites with IE6 compatibility, but don’t get too caught up in making them perfect on IE6. Validate everything too, but usually ignore vendor-specific properties like -moz-border-radius that don’t validate.