Preparing for IE7 – Hacks and Conditional Comments

CSS filters and Hacks are so 2005

I think the future of CSS is not in hacks but looking seriously into using conditional comments. I’m saying this as someone that is trying to figure out the best approach for retrofitting older conversions.

Conditional comments are IE statements that say if ie6 or any other version, use this additional CSS file. Non IE Win browsers will ignore the comment.

<!--[if IE 6]> 
<link href="/ie6.css" type="text/css" rel="stylesheet" media="all"/> 

Or is the version less than or equal to IE6

<!--[if lte IE 6]> 
<link href="/ie6.css" type="text/css" rel="stylesheet" media="all"/> 

The Curveball

IE7 is going to throw a curveball worthy of a World Series ring. While it is easy and more convenient to throw a “ * html ” statement into a CSS, we need to start seriously looking at separating our hacks into different style sheets and intelligently using filters and conditional comments to refer to them.

Microsoft has announced that the IE7 browser will ignore past “ * html “ filters that were used to send styles only to Internet Explorer and will respond to child selectors: “ html>body “ which were used to hide styles from IE. Therefore, IE7 will see the style sheets just as every other modern browser.

Will this be an issue?

If IE7 fixes its display problems, we may not have to make any changes to our legacy CSS. However, if IE7 brings new bugs to the table, we can no longer use filters to whisper in its ear. Conditional comments will be the answer.

I’m dreading the idea of inserting conditional comments into the head sections of html pages. I’d like to insert it into the main.css file that imports more sophisticated styles. I have been overwhelmed lately and haven’t been able to test any answers to this. Does anyone have a suggestion?

Imagine teasing someone that their CSS is “So 2005!” Did I just coin a term? Has Joe Clark already coined this one?