On one condition…
By Nicholas Rougeux, posted on October 17, 2005 in Browsers
Last week, there was a post made on the IEBlog recommending the use of conditional comments instead of CSS hacks to target IE browsers. The IE team has diligently been working to fix many of the parsing bugs present in previous versions and they claim that continuing to use CSS hacks will cause sites to look peculiar in IE7 since the common hacks won't work any more. My response: Why?
Don't get me wrong, it's wonderful (and somewhat of a miracle) that IE7 is being built to be more standards-compliant. Knowing that I can use CSS 2.1 selectors and that numerous bugs have been fixed is enough to make me start to enjoy testing sites in IE (almost). However, to be told that I should go back and modify all the sites that I've done to use some different code that shouldn't be needed in the first place or else the sites will break is, well, ridiculous.
I suppose my big childish question regarding this "call to action," as the IE team puts it, is "Why should we have to change our code when the other browsers handle the hacks just fine?" The current CSS hacks exploit bugs in the browser parsers causing them to think that something isn't a comment when it really is or that elements exist when they really don't to modern browsers. Take the famed star hack for example. To target IE browsers six and lower, just put an asterisk in front of the CSS rule like so
* html .foo { margin: 10px; }The way it works is simple. The rule targets all elements with the class of "foo" that are within all <html> elements within anything else. The trick here is that the <html> element is never inside anything else, and therefore modern browsers ignore it completely, while IE gets confused and gives a 10-pixel margin to the foo elements anyway.
Instead of doing this simple hack in its own CSS file, developers are now being told to use the conditional comments instead such as this:
<!--[if IE]>
<style type="text/css">
.foo { margin: 10px; }
</style>
<![endif]-->How is that better? Both methods accomplish the same thing and both are a glorified form of browser sniffing. In a perfect world, browser sniffing should never be done. Thankfully the days of browser sniffing with JavaScript have passed but we're still doing it with hacks in a way. If we start using conditional comments, not only are we continuing a poor practice of browser sniffing, but we're adding unnecessary code to our markup to do it.
I've recently adopted a practice that I first saw on Mezzoblue (Dave Shea) for organizing CSS hacks. It's simple and works very nicely. (Thanks Dave!) Only one line is needed in the markup linking to a CSS file like normal. At the top of that CSS file, there are a few lines of hacks importing different stylesheets for different browsers. Within these stylesheets are just a few specific rules to fix the older browsers' poor CSS implementation. As time goes on and support is dropped for the older browsers, removing those stylesheets is as simple as removing the import statement from the main CSS file. Modern browsers ignore these hacks because they are only used to exploit parsing bugs in older browsers so only they import the files. This way the main stylesheet is not bloated with unnecessary hacks repeated for each rule. They're contained in one file. Take a look at Dave's Wintermint CSS file to see what I'm talking about. This practice isn't in place on this site at the time of writing because I didn't know about it when I created it. It will be in the upcoming version whenever I get around to finishing it.
This brings me back to my original question. Why should we have to use extra code in our markup to target older browsers when current methods work just fine and don't cause any problems? The folks working on IE are doing a great job but if they're improving their CSS support so much, why should we have to worry about how it handles these hacks at all? Shouldn't it be ignoring them like other browsers like Firefox, Safari, or Opera? Sure "hacks" like the child selectors won't work in IE7 but they were used so browsers that knew how handle them properly would do so. IE7 should do the same. I look forward to using them for practical purposes instead of just as hacks.
Conditional comments should not be needed to target any other version. Hacks work wonderfully as they are. It would be great if we didn't have to use them but people will be using IE 5.x/6 for a long time to come. Unless Microsoft somehow releases a patch for all their old browsers and everyone applies it instantly, those older browsers will continue to have parsing bugs and hacks will be necessary. Asking developers to adjust the code on all their sites just so it plays nice with IE7 is a fairly outrageous request.
IE7 should help developers build sites without worrying about how IE handles them. I know I'm tired of creating great designs only to think, "Wow that would be great to do but implementing it is such a pain in IE." I'd rather think, "Wow, that's would be great to do." and just do it.
Now, before I get blessed out by those in the know, I should mention that I don't know everything. I'm more than willing to hear other sides of the argument here but in the end, I think we can all agree that IE7 should not break sites for using hacks that other browsers handle just fine.