close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

IE conditional comments

Tutorial created by Ray Borduin, WebAssist

Categories: Design

rating

As web designers, we all know and love Internet Explorer. Internet Explorer has a large share of the browser market spread across various versions. 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.

arrow downWhat 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.

arrow downHow 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]-->

arrow downA 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]-->

arrow downUsing 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]-->

arrow downMore Information

See Microsoft’s MSDN page about conditional comments.

arrow downReviews 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.

Sign in to add comments
rating

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.