CSS Hacks

Recently, I read a blog posted by an old workmate in New Zealand about CSS Hacks.  More specifically, it dealt with CSS rendering differences between IE7, IE6 and browsers that actually render CSS correctly (ie. Firefox, Safari, Opera and Chrome… to name a big ones).

The solution proposed, and likely one found in a number of places on the web, involved writing the CSS so Firefox rendered correctly first, which is pretty standard practise, then hacking to handle IE, then hacking again to handle IE6 specifically.  The post makes brief mention of the IE’s propietary Conditional Comments, which is essentially a mechanism to make stuff visible (or invisible) to IE browsers, while appearing as a standard HTML comment to all other browsers.  This is a mistake in my opinion, and here’s why.

  • Conditional comments are GUARANTEED to affect IE only.  Since MOST of the CSS rendering quirks exist only in IE these days, this is a huge advantage.  Sure, you’ve got a few extra lines, maybe another external download to deal with, but I think it’s a worthwhile trade off.
  • Hacks, by nature, are messy. They work because they target specific quirks in the rendering engine of the browser(s) they target. What’s more, with each new release of the target browser, there’s no guarantee that a hack that used to isolate that browser (eg. Star-HTML hack for IE6 also affects IE7) will continue to do so.  This means, you could potentially end up writing several different hacks to deal with each release of the target browser.

Obviously, the ideal situation would be to write a single CSS rule and KNOW that it will work across the board. Given this is but a pipe dream for developers and designers alike, my personal opinion is that the best approach is to use conditional comments, for the simple fact that you can target specific versions of IE, as well as all versions above or below the target version.  Knowing that these hacks may or may not affect upcoming versions of IE, or other browsers for that matter, makes them a rather unattractive solution to me.  The only real drawback to using Conditional Comments is specificity.  Given that the rules of specificity state that if two rules targetting the same element have the same specificity, then they are both applied, all you have to do is ensure the Conditional Comments appear last in the CSS list, and you’re good to go.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: