Introduction

As web designers, we all know and love Internet Explorer. Internet Explorer has a large share of the browser market spread across 3 different versions IE8, IE7, and IE6. Each version has improved from the prior, but there are still cases that require code that targets a specific version of Internet Explorer. This is where conditional comments come into play.

What is a conditional comment?

Simply put, an IE conditional comment is a HTML comment that only Internet Explorer will see. All other browsers (Chrome, Firefox, Safari, etc) will simply disregard any IE conditional comments as HTML comments. Using conditional comments is a great way to not break non-IE browsers, but still tweak your webpage for viewing in IE.

How to code a conditional comment

Microsoft has provided a straightforward syntax you can use to apply your conditional comments. Essentially, you wrap your IE-only code in an if statement.

For example, if the browser is IE6, then apply this code:

If you put the above code in your page, it will only show up if viewed with IE6 and nothing else. The first and last tags are essential when adding a conditional comment. The condition in the if can change to meet the versions of IE that you want to target.

The if condition is made up of several parts. The parts in ( ) have multiple values they can accept.

The operator can be blank, gt (greater than), gte (greater than or equal), lt (less than), or lte (less than or equal). The version can be any IE version such as 5, 5.5, 6, 7, or 8.

If we wanted to target IE7 and below, either of the following statements could be used. Notice the first one says less than or equal to IE7 and the second one says less than IE8.

A real world example

As modern browsers become more and more capable, it’s hard to provide an advanced user experience and still fully support older less capable browsers such as IE6. A great use of conditional comments is to recommend a browser upgrade to your users.

Here is an example that will display a message requesting the user upgrades their browser to ensure they have the best experience on your site. This message would only be seen by IE6 users:

Using conditional comments instead of CSS hacks

One particular area than IE6 (and to a lesser degree IE7) have problems is with the more advanced CSS based layouts. Sometimes CSS hacks are used to exploit CSS rendering bugs in those browsers and fix your page display. In theory, that seems pretty harmless. However, I wouldn’t recommend using hacks since it will break the W3C validation of your page and could have unforeseen effects in other browsers you aren’t intending to affect.

A great alternative to CSS hacks is conditional comments. You can still target different IE versions and not affect any other browsers in the process. If you’ve used the CSS Sculptor or CSS Menu Writer Dreamweaver extensions from WebAssist, you might have noticed we used conditional comments to fix some issues with Internet Explorer.

In most cases, I would recommend conditionally including a dedicated style sheet for your IE specific fixes. The below code will link in a IE6 style sheet if your webpage is accessed using IE6.

More Information

Microsoft’s MSDN page about conditional comments:

http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

About WebAssist

WebAssist helps you build better websites faster by offering software, solutions, and training needed to succeed on the web. WebAssist.com hosts a thriving community of over 300,000 designers, developers, and business owners. WebAssist's partners include Adobe, Microsoft, and PayPal.

Join our Community

From free software and training, to special offers, there is something for everyone. Come take a look at what is waiting for you and sign up today to gain access to all of the valuable benefits awarded to the members of our community. Click here to join our community.