Conditional comments for Internet Explorer AND non-IE browsers

7th April 2006

The following statement will tell you if you are using Internet Explorer or not and if so which version.
Not unusual you may say, until you look closer and realise that Microsoft Conditional Comments are recognising non-IE browsers!

You are NOT using Internet Explorer

You can also target different versions of Internet Explorer AND non Internet Explorer.

If you are using either IE6 or a non IE browser then you will see the following text.
If you are using IE5.x or IE7 then you will not see any text.

You are using EITHER Internet Explorer version 6
OR a non-IE browser

And finally you can target specific IE browser AND non-IE browsers but feed a mixture of information to both.
The following will feed extra text to IE6 which will not be seen by non-IE browsers.

You are using a non-IE browser

IE6 will see 'You are using IE6 and not a non IE browser' and non-IE browsers will see 'You are using a non IE browser'. IE5.x and IE7 will see 'You are using'.

I don't know what use this last one will be but there may be an occasion when it will come in handy.

Information

The above text is generated using just conditional comments. There is no CSS, javascript, PHP or any other programming language involved.

This is just a demonstration of how Internet Explorer's conditional comments can be used to identify non-IE browsers and serve them with markup that will be hidden from Internet Explorer.

I have used this method in my most recent version of the CSS only dropdown menu.

The xhtml

The xhtml code for the normal conditional comments is straightforward as set out by Microsoft.

<!--[if IE]>
<h1>You are using Internet Explorer</h1>
<![endif]-->
<!--[if IE 5]>
<h1>Version 5</h1>
<![endif]-->
<!--[if IE 5.0]>
<h1>Version 5.0</h1>
<![endif]-->
<!--[if IE 5.5]>
<h1>Version 5.5</h1>
<![endif]-->
<!--[if IE 6]>
<h1>Version 6</h1>
<![endif]-->
<!--[if IE 7]>
<h1>Version 7</h1>
<![endif]-->

I have found that the following code will allow you to target non-IE browsers

<!--[if !IE]><!-->
<h1>You are NOT using Internet Explorer</h1>
<!--<![endif]-->

..and finally to target non-IE and a specific IE browser
(or any combinations using lte lt or gt gte).

<!--[if IE 6]><!-->
<h1>You are using EITHER Internet Explorer version 6<br />
OR a non-IE browser</h1>
<!--<![endif]-->

<h1>You are using
<!--[if IE 6]>IE6 and not <!-->
a non-IE browser
<!--<![endif]--></h1>

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.