Skip to content

Archive for October 8th, 2007

Efficient conditional comments

Monday, October 8th, 2007

What’s the number one complaint you hear from front-end developers? “Let’s admit it, we all hate Internet Explorer 6.” “The absolute worst browser when it comes to supporting the standards is Internet Explorer.” “…IE sucks ass.” Not surprisingly, those are all actual quotes.

Every css developer has run into problems getting a website to work in that browser we all love to hate. To help us deal with those issues (and often times save our sanity), a number of solutions have been created, from css hacks to browser-sniffing javascript. Conditional comments are one of the most popular methods as of late.

Conditional comments

Conditional comments have been around for quite some time, but there’s a flaw in how they are most commonly used. If you’re already familiar with the basics of conditional comments, you can skip to the next section.

Conditional comments allow you to determine which version of Internet Explorer a user has. It’s not an approved standard by any means, but has been part of IE since version 5. Before continuing, I highly recommend you get a basic understanding of conditional comments. If you haven’t yet tried them out, you can read this for a quick intro. For a more technical explanation, try the MSDN documentation on them.

Using conditional comments gives you quite a few benefits. You can avoid confusing CSS hacks or any solutions which require the user to have javascript enabled. Best of all, unlike most methods, this is highly forwards-compatible. The functionality has been documented by Microsoft, and the IE team is devoted to not breaking what currently works on the web.

Current practice with conditional comments

The problem with conditional comments isn’t in their design, but in how most web developers are using them. For the most part, they are used as follows:

  1. Create a stylesheet that works in non-IE browsers
  2. Create an extra stylesheet that overwrites your styles so they work correctly in IE
  3. Include the first stylesheet for every browser
  4. Use conditional comments to send the extra stylesheet to IE users

The problem here is that we end up sending 2 stylesheets to all of our IE users: one for all the default styles and another to update them to work properly in IE. Ideally, we want to minimize the number of files that must be downloaded for a single webpage. This saves in file-size and eliminates the overhead involved in getting another file from the server.

The ideal process

The ideal process for conditional comments is a little more like this:

  1. Create a stylesheet that works in non-IE browsers
  2. Create a stylesheet that works in IE
  3. Use conditional comments to include your IE stylesheet to IE users
  4. Use conditional comments to include your non-IE stylesheet to everyone but IE users

By doing things this way, we only send one stylesheet to each user, regardless of which browser they are using.

Let’s see some code

The code involved is fairly simple.

The IE stylesheet

First you define the stylesheet to give your IE users.

<!--[if IE]>
	<link rel="stylesheet" href="ie7.css" type="text/css" media="screen" />
<![endif]-->

Because the conditional is inside an HTML comment, non-IE browsers will just ignore it and everything inside. This is a very basic example, but you can do a lot more. Conditional comments allow you to check for specific versions of IE and even use greater-than/less-than comparisons. Again, for more information on this, check the MSDN docs.

The non-IE stylesheet

The next thing we want to do is include a stylesheet which IE ignores, but all other browsers will use.

<!--[if !IE]>-->
	<link rel="stylesheet" href="default.css" type="text/css" media="screen" />
<!--<![endif]-->

This one should look a little different than the first conditional comment. IE will again interpret this conditional comment. However, this time we use ‘!IE’ as the condition. This will tell IE to ignore the style sheet within.

We do, however, still want our non-IE browsers to use this stylesheet. Since the conditional feature is specific to IE, we have to rely on another method: regular HTML comments. By closing the HTML comment right after the IF conditional, non-IE browsers are able to see the stylesheet. Then just enclose the ENDIF in another HTML comment to hide Microsoft’s feature from any other browsers.

For an example of this method in action, go here. It’s a simple example that should clear up any confusion you may still have. Just check out the source of the page to see how it’s working.

Any drawbacks?

I’m sure there will be some perceived drawbacks to this method. This method has the potential to create a very confusing css code base. Because there will be multiple stylesheets that need to work completely separate from each other, you’ll likely be sharing a lot of code across each file. This is an issue that can (and should) be solved in your back-end. If you have a lot of similar code being shared, use something server-side to combine the common css before sending it off to the user. It’ll allow you to keep your code maintainable and your users will benefit from the quicker load times of a single stylesheet.

Also note that the technique discussed here can be useful in a variety of other cases. As I’ve written previously, it works quite well for embedding flash without the use of javascript.