CSSPLAY

CSS DEMOS › Conditional comments for Internet Explorer AND non-IE browsers

Date : 7th April 2006

For all modern browsers

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

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. 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.