Using Conditional Comments

If life was simple for web developers then our sites would look perfect in every browser going, unfortunately that’s not the case and the biggest culprit of causing problems and not following standards is Internet Explorer. It doesn’t help that, despite IE8 being out, plenty of people are still using IE7 and IE6. It was only last summer that I was asked about supporting IE5!

Luckily we can target the various versions of Internet Explorer still in use by using conditional comments. These allow us to put styles specifically for each version or a number of versions in a separate stylesheet and give us greater control over the site and its appearance in the various browsers available.

A conditional comment is a bit like an if statement (if you’re familiar with any type of coding you should understand this). The conditional comment can be used anywhere within the HTML document, and whilst commonly used to limit CSS and JavaScript files loading for specific browsers, they can be used for anything. For example, if you wanted to put a big comment at the top of your page to anyone not using the latest version of Internet Explorer (8) you could use:

<!--[if lt IE 8]>
	<h2>Upgrade your version of Internet Explorer Today!</h2>
< ![endif]-->

The first line here says ‘if less than IE8′, then if that criteria is met it will display the heading. Here I’ve used ‘lt’ for less than. Other options are:

Match all sub versions of IE7:

<!--[if IE 7]>
      ....
< ![endif]-->

.

Match all sub versions of IE7 and below (so IE6, IE5.5, IE5 etc), the lte stands for less than or equal to:

<!--[if lte IE 7]>
      ....
< ![endif]-->

Match all versions of Internet Explorer except version 5 and all subversions.

<!--[if !IE 5]>
      ....
< ![endif]-->

Match all versions of Internet Explorer except version 5.5:

<!--[if !IE 5.5]>
      ....
< ![endif]-->

The reason these comments are ignored in non IE browsers is due to the comment code before and after the if statement. With that in mind, there may be times when you want to block a specific version of IE, but load something for every other browser version in IE, along with Firefox, Opera, Safari, etc. To do this we can close the comment for the if condition, have the code and then open a comment for the endif. Internet Explorer will still pick up the conditional comment and ignore the other code, and other browsers would treat the if and endif as comments but parse the code inbetween e.g.

<!--[if !IE 5.5]><!-->
      ....
<!--<![endif]-->

This will then load any code between the conditional comments for any browser besides Internet Explorer 5.5.

So we can put this into practise by revisiting last week’s post about fluid widths. The code given in the post will work for IE7+ but it won’t work in IE6 and below. So after the call for our standard stylesheet we can now add in a call to an IE6 and less stylesheet e.g.

<!--[if lte IE 6]>
	<link rel="stylesheet" href="/css/IEonly.css" type="text/css" title="IE6only" media="screen" />
< ![endif]-->

Then to get our min and max width method work in these browsers we put into a stylesheet called IEonly.css the style:

#wrapper {
	width: expression(
	document.body.clientWidth < (765)? "760px" :
	document.body.clientWidth > (1205)? "1200px" :
		"98%");
}

This expression is a bit like an if statement itself. It reads the width of the browser and if it’s less than 765px then it sets the width of the wrapper to be 760px. If it’s greater than 1205px then it sets the width of the wrapper to be 1200px. If it’s somewhere inbetween then it will set the width of the site to be 98%. The reason the values in the if conditions (765 and 1205) are not the same as the true min and max widths is because setting them to be identical can cause IE6 to freeze, which we don’t really want, and a 5px higher figure will avoid this.

Of course this is quite an advanced solution / fix, however there are plenty of other reasons to use conditional comments when required. Most often they’re needed to allow us to override settings in the general stylesheet for positioning, which IE6 and below get badly wrong! This should now allow you to have greater control and get your site looking and working how it should for all popular and semi-popular browsers available.

Written by Sarah from Stuff By Sarah
Posted on April 23rd, 2009 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

2