What are Conditional Comments in Internet Explorer?

Posted November 17, 2005

Rothe Blog CSS Logo
It would figure that about five minutes after the ink dried on my previous post about child selectors, and “proper” use of them to send specific rules to each browser by exploiting a shortfall of Internet Explorer’s rending of CSS (breathe…..pause), I am now going to explain the better way to deliver specific rules to each browser using Internet Explorer’s Conditional Comments.

As reports on the Microsoft developer blogs, and many numerous other places have told us, Internet Explorer will now support child selectors. While this is exciting for more specific rules, that also means that any rules that were previously written to fix something between Firefox and Internet Explorer will start to cause problems. As a designer, if I wrote a rule that used a child selector (.class > .classTwo) that was specifically aimed at Firefox and would break Internet Explorer, now IE 7 will look in that rule, understand it, render it, and break your layouts.

Fortunately, the big CSS guru’s who are writing about breaking news, cutting edge stuff as it happens have populated the internet with enough information about what can be done about this problem.

I have coded a handfull of extensive CSS websites now, and know that no matter how many rules you may have, if written properly, you won’t have too many hack rules in a sheet. I think the most I have had in some of my mine have been 5-10, 5-10 rules using the child selector.

We know these are the rules that will break, so what we need to do, is set the regular rules back to these values, and take the values we want Internet Explorer to see and seperate them into a whole seperate stylesheet.

Why are we putting these in another stylesheet?

Well, this should be an easy preventative fix for when IE 7 is released. If you are smart, and have some sort of templating system in place for your websites, you should be able to add this line of code in one place, and have it affect the whole site. We need to add what is known as a conditional comment, something that IE parses and evaluates, and if it evaluates to true, then executes. This is how we are going to issues a second stylesheet to Internet Explorer to overwrite any necessary rules.

What you should have done if you were smart

If you used Smarty, or some other templating system, you would have a main background file that would pull in content in the body of the pages. Or, *gasp*, if you use Dreamweaver templates, same thing. For me, I use PHP includes because I wasn’t as comfortable with Smarty at the time that I built this site. But I have one file that I include for a lot of my information included in my <head> tags.

What you need to do, finally

Step 1: Underneath the link to your current stylesheet, make a link to your Internet Explorer only sheet. For me, this link looked like this;

Step 2: Write the conditional comment. This is the format;

<!–[if IE]><![endif]–>

Basically, this tests to see “if” the browser is IE, and if it is, then it will include what ever is inside the comment. Pretty neat huh? Could change your world right? This is something that IE will more than likely never drop in support. Never is a hard word to say, but this is about as close as you can get.

The other neat thing, is this can help you if you are trying to validate, you can include propreitary css styles in your IE stylesheet, and it will only render in IE, like those tempting scrollbar styling properties.

So, finally, this is what my link looked like;

<!–[if IE]>

<![endif]–>

Final notes

The other sweet thing about this is, you can test for other versions of IE. So, if you want to have this stylesheet only be spit out for version 5 of Internet Explorer, then just add a 5 in, it is that easy. Just like this;

<!–[if IE 5]><![endif]–>

Or add a 4, whatever is the case. A really helpful piece of information, and can save you from trying to rework any sites, learn anything new, etc. and isn’t that time consuming to do, if…you set the sites up right in the first place to easily maintain.