If you haven’t heard yet, last week the jQuery team announced on their blog that jQuery 2.0, which is scheduled for an early 2013 release, “removes support for IE 6/7/8 oddities such as borked event model, IE7 ‘attroperties’, HTML5 shims, etc.”
Because many people had a bit of a fit over that, the jQuery team posted a follow-up that addresses some common concerns and whatnot. In addition, a SitePoint article discussed the situation, but (uncharacteristically) that article and some of the comments are inaccurate.
So in this post, I’m just briefly showing everyone a simple solution for serving a different version of jQuery (or really, any script) to Internet Explorer versions 6-8.
Here it is, as shown on the jQuery blog, using conditional comments:
<!--[if lt IE 9]> <script src="jquery-1.9.0.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <!--<![endif]-->
But this doesn’t seem to be as clear to everyone as to why this actually works. SitePoint’s article in particular not only had the code wrong (did the jQuery blog have it wrong originally?) but that article also incorrectly states that non-IE browsers are left out of this, and one commenter even provided a JavaScript solution that is completely unnecessary.
Going by SitePoint’s incorrect version, it’s true that non-IE browsers wouldn’t see any script. But notice that the second script tag in the jQuery blog version of the code (shown above) is wrapped in conditional comments that are slightly different from the conditional comments wrapping the first script tag.
Here, let me make it a little more clear:
<!--[if lt IE 9]> <script src="jquery-1.9.0.js"></script> <![endif]--> <!--[if (gte IE 9) | (!IE)]><!--> <script src="jquery-2.0.0.js"></script> <!--<![endif]-->
Notice now I’ve added a second expression, separated by the “or” operator (the vertical pipe). This is not needed, because the end result will be the same: The second script tag is seen by IE9 and non-IE browsers. The added expression, although useless, actually makes the code easier to read from a developer perspective. Thus, although it’s more code, I tend to feel this is actually a better solution.
Final Notes
Here are some random notes regarding this issue:
- The script tag that the non-IE browsers see is wrapped inside what is referred to as a downlevel-revealed conditional comment; HTML5 Boilerplate uses this for its last conditional class
- As SitePoint correctly pointed out, IE10 does not support conditional comments; so technically you could just do “if IE9” instead of “if gte IE9”
- The jQuery blog follow-up post pointed out that jQuery 1.9 will continue to be supported until IE8 is no longer an issue in browser stats
- Obviously, this solution is pretty useless for jQuery until version 2.0 actually gets released, but if nothing else this is just another reminder of the quirks of conditional comments
- This announcement by the jQuery team makes it clear that you should never link to something like
http://code.jquery.com/jquery-latest.jsin production (something I’ve written about before)
If anyone has anything further to add, or has a recommendation for a better solution, I’m glad to update this post.
I’m not sure if you made that even more confusing by adding the !IE bit in there. I can understand why it might be simpler for some people but it’s misleading. IMO the code is quite simple:
– The first 3 lines of that code is one complete comment.
– The 4th and 6th lines are comments, but the 5th line is outside any comment.
– Each comment contains code that only IE understands, so non-IE browsers will always only use the 5th line and ignore the rest.
– IE before v9 will then use the first script, and IE v9 onwards will use the second.
That’s how I see and understand it in my head so hopefully that helps anyone who is still confused.
Out of curiosity, why wouldn’t you use yepnope to handle this, rather than conditional comments? For instance, according to this article (and verified by quirksmode), getElementsByClassName is not supported by IE8 and below, but is by everything else. So we could do something like
I don’t know why, but conditional comments have always given me the willies. I would much rather handle it this way. That being said, if there is some reason why using conditionals is The Better Way™, I am willing to change my mind.
In web development, there never really is a “better way”. For some things, maybe. But it usually depends on the situation.
The reason that conditional comment are better than what you’re suggesting is that CC’s don’t depend on JavaScript being enabled, whereas yours does. But this is a very small thing, because very few people have JS disabled.
So if you’re not concerned about non-JS users, then use that, but I just don’t see a reason to do that, since CC’s work perfectly fine.
While you do have a point, if a user doesn’t have javascript enabled, then using CC’s is irrelevant to load jQuery, since it isn’t going to run anyway.
Ah, yes, of course. Haha.. I get so consumed with “best practices” (accessibility, etc) that I didn’t even realize that. So, yeah, you’re right, if you want to use JS for this then I guess that’s fine. I think it’s just simpler with CC’s really.
I’m going to be using your yesnope stuff only because I think it looks cleaner than the if’s. However, I originally modified this if statement: if (gte IE 9) | (!IE) to look like this: if (IE 9) | (gt IE9) | (!IE)
for IE10 users because of the whole gte not working. I just felt that the javascript stuff was a bit cleaner. Also though, I already had some Javascript right where I needed to test so it worked out real well for me. Just copied and pasted a few lines. Thanks guys!!
Man, I feel kinda stupid. Been spending all day trying to figure out why my website has problems. I know this is going to sound stupid, but I didn’t realize yepnope was a special javascript function. I didn’t realize I had to download it. I accidentally stumbled across it when I was trying to use it do something else. I also found out it’s deprecated now. So what’s the preferred way of doing this stuff now?
Thanks.
https://github.com/SlexAxton/yepnope.js#deprecation-notice
Other way fixing all problems could appear like IE5 or “Cannot read property ‘split’ of undefined” console error when using “test, yep , nope” method:
if(!!document.createAttribute){ // IE6+
if(!!document.getElementsByClassName){ //IE8+
yepnope.injectJs(‘jquery-2.x.js’);
}else{
yepnope.injectJs(‘jquery-1.x.js’);
}
}