spyka webmaster

What are they?

Conditional comments are a feature of Interner Explorer, they are similar HTML comments and allow easy, but very basic, browser detection. It's a simple way to carry show/hide content depending on the browser of the end user.

Why would I want to use them?
The most common reason for using conditional comments in IE is to add an extra style sheets to fix display bugs in a browser. This allows you to make sure your web design is working fine for any user visiting your website.
You can also use them in order to prompt or advise your visitors to upgrade their browsers in order to get better security features and allow you to make the best use of new features.
The basic reason for using conditional comments though is simply to show extra content because of the type of browser a visitor is using. This can be done using other methods - such as Javascript or even PHP functions - so what makes conditional comments so great?

• Simple - The comment is just an if statement - no complex or lots of lines of code.
• No exrta scripts - Conditional comments don't use any scripts or language so do not depend on the users settings.
• Surprisingly extensive - Although just a simple comment the expressions can be made pretty complex (as we'll see later in this tutorial)

The basics

As mentioned earlier conditional comments are similar to normal HTML comments. If you haven't used these before, they are a way of hiding content in a HTML page and used as such:

Comments will still appear when viewing the source code as will conditional comments.

The syntax of a conditional comment is:

<!--[if expression]>
this will only show if the expression is true
<![endif]-->

For browsers which do not support conditional comments it will be treated as a normal HTML comment and so your website won't be in a mess.

So - what sort of expressions can be used? On a very basic level we can check to see if a browser is IE:

<!--[if IE]>
<p>You are using IE</p>
<![endif]-->

In this case the paragraph will only show if the user is viewing the page using internet explorer.

But what if we want to be more specific? Well we can add a version number to the expression as such:

<!--[if IE 7]>
<p>You are using IE version 7</p>
<![endif]-->

Here the comment content will only show if the user is using IE7.

The last bit of the basics is the NOT operator: !. This can be used to check if a user is NOT using a browser like so:

<!--[if !IE]>
<p>You are <strong>not</strong> using IE</p>
<![endif]-->

And that's it for the basics. Continue to read on to learn about using less than and greater than operators.

A bit more complex

Now we will look at less than, greater than and similar operators. In total there are 4:

These 4 operators should be quite easy to understand. Here is an example of how they can be used:

<!--[if lte IE 6]>
<p>You are using IE 6 or earlier</p>
<![endif]-->

This example compares the users browser with IE version 6. If the user's browser is IE6 or less (e.g. IE5.5, IE5) then the comment content will be displayed

A bit more complex still

Next we will look at the AND and OR operators.

The AND operator
The AND operator allows us to check if two (or more) subexpressions are true in order to show the comment content. Here is an example:

<!--[if (gt IE 6)&(lt IE 8)]>
<p>You are using IE7</p>
<![endif]-->

In this example the comment first looks at whether the user's browser and version is greater than IE 6 and then whether it is less than IE8. Only if both of these subexpressions evaluate as true will the comment content show.

The OR operator
The OR operator is the same as the AND operator except only one of the subexpressions needs to be true. Again, here is an example:

<!--[if (IE 6)|(IE 7)]>
<p>You are using IE6 or IE7</p>
<![endif]-->

Here the comment evaluates both sub expressions and if one (or both) are true then the comment content will show.

That's it - conditional comments in IE!