Loading a Different jQuery Version for IE6-8

Loading a Different jQuery Version for IE6-8If 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.js in 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.

Photo credit: 3D “e” logo with lock from Bigstock

Advertise Here

5 Responses

  1. Scott:

    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.

  2. Sean:

    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

    yepnope({
      test: document.getElementsByClassName, //not supported <=IE8
      yep: 'jquery-2.0.0.js',
      nope: 'jquery-1.9.0.js'
    });

    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.

      • Sean:

        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.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.