Loading a Different jQuery Version for IE6-8

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.

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.

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.

7 Responses

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.

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?

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.