IE Conditional Comments
Written by David Walsh on Thursday, January 14, 2010
As we all know too well, Internet Explorer is the browser that tends to cause web developers the most pain. Maybe it’s because Microsoft currently has 3 very different browser versions we have to account for. Maybe it’s because the earlier versions of the browsers didn’t adhere to standards. Maybe it’s because IE6 wasn’t updated for so many years. Whatever the reason, IE is here and we have to deal with it.
CSS and Javascript issues within each version of IE present us with layout and functionality issues. Double margins, floating and absolute positioning, and lack of PNG support are probably the most frequent problems. Luckily Internet Explorer has been supporting conditional comments which allow us to target blocks of HTML toward all IE browsers or specified IE browsers.
Examples of IE Conditional Comments
<!--[if IE]>
<style type="text/css">
a { color:#fff; }
</style>
<![endif]-->
The example above sets the color of links to red if the browser is any flavor of Internet Explorer.
<!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script> <![endif]-->
The example above example includes the IE8.js library int the page if the version of Internet Explorer is less than 8.
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png');
</script>
<![endif]-->
The example above fixes PNGs if the browser is Internet Explorer 6.
Conditional Comments Syntax Table
| Item | Example | Comment |
|---|---|---|
| ! | [if !IE] | The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. |
| lt | [if lt IE 5.5] | The less-than operator. Returns true if the first argument is less than the second argument. |
| lte | [if lte IE 6] | The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. |
| gt | [if gt IE 5] | The greater-than operator. Returns true if the first argument is greater than the second argument. |
| gte | [if gte IE 7] | The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. |
| ( ) | [if !(IE 7)] | Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. |
| & | [if (gt IE 5)&(lt IE 7)] | The AND operator. Returns true if all subexpressions evaluate to true |
| | | [if (IE 6)|(IE 7)] | The OR operator. Returns true if any of the subexpressions evaluates to true. |
While we all dislike Internet Explorer’s bugs, their conditional comment syntax provides us a perfect method for fixing them quickly.
Valuable Resources
- If you’d like to cut one of the browser version issues out of the equation, you can always make IE8 emulate IE7.
- Be sure to check out the MSDN documentation for Microsoft’s “official” guide.
- PPK has some awesome notes about conditional comments.
Have fun fixing your code in Internet Explorer with conditional comments!
Epic Discussion
Be Heard!
I want to hear what you have to say! Share your comments and questions below.
Keep that Voodoo nonsense to yo’self! :P
Have you used IE7.js or IE8.js? I haven’t gotten around to testing them, but it looks like they could help in this area.
http://code.google.com/p/ie7-js/
@Will: Yep, I have used it before. It’s not for every project but it sure is nice!
I use IE8.js and it’s been generally a Godsend except that it doesn’t seem to like playing with my DD_belatedPNG fix.
I figure it’s better for smaller websites/projects but shouldn’t be used on anything large.
Just take note that when you use the if !IE statement, the format differs, you don’t include the <!– section, only
damn, comment got cut…
<!– becomes <!
(this is bad) But I’ve said sod it to IE6. IE7+8 aren’t too bad just some off css filters…
I’ve said this before – if I had it my way I would drop all support for IE. I would save a load of development time, which could go to something more important that could potentially be useful to the end user. However since so many people use IE I feel obligated to support it the best I can.
It’s like the 300 pound bully at school. You really want to shut him up and put him in his place but there is nothing you can do… You’re only a 120 pound skin and bones kid, and would not stand a chance…
Anyway if you can’t beat IE then I suppose I should be grateful that there are these convenient conditionals. :/
good post. thanks
@Edd Turtle: I’ve also dropped IE6. If a client wants support for it I charge extra.
Supporting IE6 can be very painful :(
On one of my projects it took me the same time as the coding for non-IE browsers…
I hate that tImE-wasting-browser ;-)
Thanks, I used a few of these tricks on a site i’m currently developing. Makes life a lot easier to provide ie6 support. If only I could find a way to differentiate ie8 in vista and xp, because even those have differences.
Hey, David.
I am a reader of your blog from China.
I just read your post which introduced about the IE condition comments today. I think it is a very useful skill and want to translate your post to Chinese in my blog(http://www.learnenjoy.cn).
well, what do you think?
O(∩_∩)O
Chinese smilies scare me… :S
Hmm .. I have some doubts about that. In IE6 it doesn’t work as I imagine, but in IE7 it’s pretty good .. anyway thanks
@Michael Bryan
Guess thats why you don’t get much work then?
Useful stuff David – bookmarked!(who needs books?).
Conditional comments save so much time. And takes away the need for any CSS hack. Hacks are bad!
This could be achieved with php though easily enough, right?
Good article Dave! I never heard about this Javascript Framework before – http://code.google.com/p/ie7-js/ (Nice link)
Agree with Edd.
Just include all of the scripts and stylesheets using php.
PHP get_browser(null,true); function gets the browser name, so…
$b=get_browser(null,true);
if ($b[browser]==’IE’) {
echo ‘IE ONLY’ ;
}