Use of conditional comments to target certain versions of Internet Explorer is pretty commonplace nowadays, and is generally seen as the best-practice method for including separate styles for IE.
But conditional comments have some unique possibilities and quirks that maybe you haven’t considered before, or have simply forgotten. Here is an overview of some things you may not know about conditional comments.
You Can Target Every Browser Except IE
I think this is the most useful item on this list. While it would be nice to be able to target individual non-IE browsers by version, that simply isn’t possible through conditional comments. But it is possible to tell your document to display styles that will apply to every browser except Internet Explorer (all versions). Here is the syntax:
It should be noted that the Microsoft-recommended version of the above code will not validate. This is actually an altered version of what Microsoft originally recommended.
You Can Target Non-IE Plus Some Versions of IE
This is another possibility that could be practical, and is a variation on the above example of targeting everything but IE. Here’s the syntax:
<!--[if IE 7]><!--> <link href="alternate.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
It’s hard to notice at first, because the above comment at first glance looks very similar to a standard conditional. But the above stylesheet will only display to IE7 along with every other non-IE browser. You’ll notice that the opening and closing
if statement sections are enclosed in comments (which hides them from the other browsers) but they also still qualify as a conditional visible to IE, so the conditional will still apply to the targeted version(s) of IE.
You can also accomplish something similar by nesting conditionals, like this:
<!--[if IE]><![if IE 7]><![endif]--> <link href="alternate.css" rel="stylesheet" type="text/css"> <!--[if IE]><![endif]><![endif]-->
You Can Use Conditionals to Customize Markup
This is something that I have to admit, I was not familiar with until quite recently (probably because I rarely use IE-only CSS). It was pointed out in the comments in a previous article but evidently was first proposed by Paul Irish.
Here’s the basic syntax:
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> <!--[if IE 7 ]> <body class="ie7"> <![endif]--> <!--[if IE 8 ]> <body class="ie8"> <![endif]--> <!--[if !IE]><!--> <body> <!--<![endif]-->
So, in this example, the
<body> tag gets a different class name depending on the version of IE being used. Non-IE browsers get a naked
<body> tag (the last line). Targeting IE in your stylesheet then becomes just a matter of adding
.ie6 in front of your selectors.
This option works as an alternative to conditional comments, and allows you to keep all your styles in the same file in order to save HTTP requests (which would grow in number if you use extra stylesheets targeted by conditionals). I think this is great advice in light of IE’s performance issues. IE is slow enough as it is; if you can do anything to speed it up (or more accurately, prevent it from slowing down), then go for it.
You Can Target IE Versions by Decimal Points
I really don’t see the use in doing this, but technically speaking it is possible, and good to know should something like this be necessary. This targeting is referred to as targeting by “version vectors”. But apparently, you have to know the exact version vector, otherwise the conditional will fail.
Here’s an example that correctly targets IE5.0 (not that you would ever have to do this!):
<!--[if IE 5.0000]> <link href="ie5.css" rel="stylesheet" type="text/css"> <![endif]-->
It should be noted that the version vector can change according to the Windows machine being used, so the above syntax would not necessarily target all versions of IE 5.0, but only IE5.0 on certain machines. More info on this can be found here on MSDN. And there’s a very detailed explanation at the bottom of this article describing how to target specific versions of IE by version vectors.
You Can Use Other Operators in Your Expressions
Normally, the expressions we use to target IE include the use of the NOT operator (!), or one of the greater than/less than operators (gt, gte, lt, lte), but you can also use the subexpression operator (), the OR operator (|), as well as the AND operator (&).
<!--[if (IE 6)|(IE 7)]> <link href="ie6-7.css" rel="stylesheet" type="text/css"> <![endif]-->
The expression above uses parentheses combined with the OR operator to target IE6 and IE7, and nothing else. Since IE5 is out of general use, then this method has become somewhat obsolete, since you can accomplish the same thing by using “lte IE7” instead.
And here’s how you would use the AND operator (this example targets IE5 and IE6):
<!--[if (gt IE 4)&(lt IE 7)]> <link href="ie5-6.css" rel="stylesheet" type="text/css"> <![endif]-->
I’m not sure if any of the above suggestions will be used too often, other than maybe the ability to target non-IE browsers. Conditionals have certainly saved developers many headaches, and like CSS hacks, continue to be used to create a consistent cross-browser experience.
Are there any other quirks and facts about conditionals that I haven’t mentioned here?