IE conditional comments

Tutorial created by Ray Borduin, WebAssist

Categories: Design

3 ratings | Sign in to rate this tutorial | View comments

next section

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.

next section

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 IE 6]>
This will only show up in IE6.
<![endif]-->

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.

<!--[if (operator) IE (version)]>

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.

<!--[if lte IE 7]>
This will only show up in IE7 or below.
<![endif]-->

<!--[if lt IE 8]>
This will only show up in IE7 or below.
<![endif]-->

next section

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:

<!--[if lte IE 6]>
We noticed you are using Internet Explorer 6. Our website is best viewed in a modern browser such as Chrome, Firefox, or Safari.
<![endif]-->

next section

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.

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href=" ie6.css" />
<![endif]-->

More Information

See Microsoft’s MSDN page about conditional comments.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

3 ratings | Sign in to rate this tutorial