I have been working on my first job this week, hence my lack of posting recently. It has been quite an experience finally designing a site for someone else, but this is not really the issue on my mind.

The Box Model Hack Strikes

The design of the site that I was creating this week prompted me to think about support for CSS within IE and the highly documented ways to work around it. I was using the CSS from the method for sticking a footer to the bottom of a page from A List Apart and noted the use of Tantek Çelik's box model hack. As I progressed with the design, I came to rest on a fixed width layout and deployed the box model hack again. By the time I came around to the third use of the hack I had almost forgotten what the first two were for and had to read the code carefully to work out what I was trying to achieve.

"This can't be right, this is my first project and I'm already confused," I thought. This reminded me of an article I had read over at Vitamin. Dave Shea denounced the use of CSS hacks in his article Stop Hacking, Or Be Stopped encouraging the use of Microsoft's proprietary conditional comments. IE7 is coming, hacks will stop working and old and new versions of Internet Explorer's mistakes will surface when users make the switch to IE7 he said, and I agree, but my perspective on this matter is from another step back.

Clear Code, Clear Mind

Why are CSS designers using code that looks like this:

div.content {
  width:400px;
  voice-family: "\"}\"";
  voice-family:inherit;
  width:300px;
}

followed by the cutely named, "Be nice to Opera 5" hack:

html>body .content {
  width:300px;
} 

This is hardly elegant, it is confusing and bloats the code. Plus, if you design a site using hacks of this variety without commenting it heavily and someone else comes along to take over the site, they won't know where to begin. In this example we are targetting the broken box model of IE5.X, so why not use the following snippet in your HTML:

<!--[If IE 5]>
<style>
div.content { width:400px; }
</style>
<![endif]-->

leaving only the line:

div.content { width:300px; }

in your CSS for all other standards compliant browsers to see? You could even put the IE specific code in another stylesheet that only IE users would download, rather than taking up space in your HTML. I'm sure no-one minds giving IE users a little more to download.

So conditional comments target the exact IE version that we need to fix, or any range of them, they won't be disappearing, like some of the well used hacks, and they even decrease the size of your css file (at least to those who have made the jump to a standards compliant browser). Finally, they are easy to understand and won't confuse anyone in the future who may take over development of the site or design in question.

Other Uses

Recently an article on IE7s non compliance with standards caught my eye. The author was so taken aback by the lack of compliance with the W3C's recommended standards that it prompted them to ban IE users from their site NewsCloud. The resulting uproar caused them to open the site to IE users, but display a message to IE users urging them to download Mozilla's Firefox instead. A great idea, but the implementation was through PHP. It seems to me that formulating PHP to do the job was slightly wasted when conditional comments are built especially by Microsoft for this purpose (alright, they weren't made to encourage users to download other browsers, but what an excellent use it is)! All you need is:

<!--[If IE]>
Message to IE users
<![endif]-->

Final Thoughts

I don't know why Microsoft decided to implement conditional comments, but they have their uses in clearing up after the IE programming teams mistakes. According to this study of standards support in different browsers, IE 6 only supports 51% of the CSS 2.1 standard and IE 7 a mere 4% more. However Firefox doesn't cover it all and none of the browsers are anywhere near support for CSS 3. I would like to urge the W3C and other browser teams to seriously consider adding conditional comments to their projects so that the need to hack CSS is diminished and the power to develop cross browser sites is given back to the designer.