Internet Explorer: the bane of any web developer trying to make their pages cross-browser compatible. Sure it has improved a lot with the last couple of versions, but because it has always been such a popular browser its older versions are still in use by an arguably large percentage of the public. Not long ago I was at the library only to find that their computers are still equipped with IE6! The problem of course is that these old versions don’t seem to follow any logic other than their own in interpreting HTML and CSS. How many times have you worked hard on a webpage when, after hours of toiling away at it, you decide to check it on an old version of IE only to find that it doesn’t know how to interpret what you’ve created at all and your masterpiece is displayed as something else entirely — something that probably doesn’t make any sense!? Worse yet, each version of IE will display a unique kind of mess.
The importance of cross-browser compatibility
Trying to write HTML and CSS in such a way that every browser will interpret it in the same way can be very difficult, possibly impossible and most likely very time consuming. This is the reason a lot of web developers throw in the towel and decide to ignore outdated browsers. I do agree that the web needs to move on and the less lip service we pay to outdated browsers the faster we will achieve that goal — but we don’t always have that choice. Sometimes clients demand that their websites be compatible with old browsers. Other times we can check statistics and see that the percentage of users accessing a website with outdated browsers really is significant — of course that percentage varies with each website and the type of audience that has an interest in it.
How IE conditional comments work
So it seems the problem is writing one absolute piece of code that is interpreted equally by every web browser, or at least every modern browser and Internet Explorer versions going back to 6 (everything else is probably negligible despite the site’s audience and this might need to be explained to certain clients). Then let’s eliminate the problem: we will not write an absolute piece of code for every browser; we will write code that is conditional. Since we are not worried about the outdated versions of any browsers besides IE6 these “conditional comments” will specifically target IE and will be ignored by any other browsers. It sounds almost like we will be programming using if-else statements. In principle that’s how conditional comments work, but in practice it just involves writing a couple extra lines of HTML, no programming knowledge required. These comments are only read by IE browsers. It’s as if its developers unleashed an unspeakable evil upon us and then felt guilty and decided to throw us a bone.
Writing conditional comments
Conditional comments can be used either within the head of your page (to present different stylesheets depending on the browser, for example) or directly in the body. They look like this:
<!--[if IE]> According to the conditional comment this is IE. <![endif]-->
Simple, isn’t it? If the website is being accessed through IE (any version in this case) the text between the opening and closing comments will be displayed; otherwise it will be completely ignored.
If we wanted to target a specific version of IE, this is how it would look:
<!--[if IE 6]> According to the conditional comment this is IE6. <![endif]--> <!--[if IE 7]> According to the conditional comment this is IE7. <![endif]--> <!--[if IE 8]> According to the conditional comment this is IE8. <![endif]--> <!--[if IE 9]> According to the conditional comment this is IE9. <![endif]-->
As of this writing we have conditional comments up to IE9 available to us. It’s just as well since IE10 seems to have finally caught up with the times.
“What if I want to target all IE versions under or above a specific one?” I’m glad you asked. In this case we would use lt (lower than), lte (lower than or equal), gt (greater than) or gte (greater than or equal) in our syntax. Like so:
<!--[if lte IE 9]> According to the conditional comment this is all versions of IE up to and including version 9. <![endif]-->
Finally it is also possible to target every browser except IE. There are two ways to do achieve this:
<![if !IE]> According to the conditional comment this is not IE. <![endif]> <!--[if !IE]><!--> According to the conditional comment this is not IE. <!--<![endif]-->
Note that the first way required that we remove the dashes from the conditional comments! The second way looks more complicated but if you write your code in a program with color coding, or which in some way modifies your text to make it easier to visualize its different parts (comments in this case) the second method might be preferrable. Try it out and see which works better for you. The output to the browser will be exactly the same.
Similarly we have the option of target every browser except a certain version of IE. Once more, we have two ways of doing this, as shown below:
<![if !IE 6]> According to the conditional comment this is not IE6. <![endif]> <!--[if !IE 6]><!--> According to the conditional comment this is not IE6. <!--<![endif]-->
Again, notice the missing dashes in the first method!
Finally, there might be times when we need to target more than one browser without using greater/less than [or equal]. For this we can use operators! Available in our arsenal are the subexpression operator (), the OR operator (|) and the AND operator (&). Here’s an example using OR:
<!--[if (IE 6)|(IE 7)]> According to the conditional comment this is IE6 or IE7. <![endif]-->
As with the other “not IE” conditional comments we have a choice of two different syntaxes when using “not IE” with operators. This is how they look:
<![if (!IE)|(gt IE 7)]> According to the conditional comment this is either not IE or it is IE8+. <![endif]> <!--[if (!IE)|(gt IE 7)]><!--> According to the conditional comment this is either not IE or it is IE8+. <!--<![endif]-->
More tools that help development for different browsers/versions of IE
Also check out my article about testing on different browsers and browser versions using VirtualBox and go make your pages cross-browser compatible!