jQuery 2.0 released, drops support for IE8 and below

Article Primary image
Author Image - Phil Middlemass

By Phil Middlemass

Our Creative Director giving his opinion on 17 years in the digitial industry working with leading brands and companies

A few days ago jQuery 2.0 was finally released after much anticipation and discussion over it’s controversial decision to drop support for Internet Explorer 6, 7 and 8. With ‘legacy’ IE browsers still making up a significant percentage of internet users for many sites, we take a look at what it means for designers and developers using the library for new web developments and investigate ways to take advantage of jQuery 2.0 for modern browsers whilst still providing a fallback for older IE browsers.

What does jQuery 2.0 brings to the party

The fundamental selling point of jQuery 2.0 is that it is a JavaScript library for the modern web, where the clunky web browsers of years gone by are a distant memory consigned to history. It’s a brave move for the library, one it probably could have put off for another year or two, but ultimately one it couldn’t avoid. It may also be a confusing one for users of the library. It’s not directly replacing jQuery 1.9 but is in fact a fork of 1.9 with both versions being supported and developed alongside each other.

With older IE browser support dropped the jQuery library has been overhauled, redundant code has been removed resulting in a leaner, faster jQuery library that is 8kb (12%) smaller than it’s 1.x counterpart. This should sit well with developers who specifically target modern browsers for their web apps and Chrome extensions etc. who are looking for raw performance improvements.

The developers of jQuery could have pushed performance gains further if it were not for the decision to stop short of dropping support for Android/WebKit 2.x browsers as well. According jQuery’s Dave Methvin, “Android/WebKit 2.x browsers are now the weakest link. We’re carefully watching Android 2.x market share to determine when we can cross it off the support list, and don’t expect it to take very long.”

In addition to the headline selling points of jQuery 2.0 it also builds upon the newly introduced Custom Builds feature from jQuery 1.8 allowing users to generate a customised jQuery library tailored to their needs by cherry picking from 12 different modules.

But clients still need support for IE7/8

Today and for the foreseeable future the ideology that we can just cut older browsers loose just isn’t compatible with what clients require. Indeed some of our own clients specifically require IE8 as a minimum requirement needed to fully support their customer base, a random selection of our client analytics put traffic from IE8 and below browser’s in the 6-15% bracket. Our own Leighton.com site in stark contast puts IE8 and below at just 0.24% of visitors to our site, but that can be entirely accounted for by the market we operate in and that our visitors are unanamously tech savvy webbies who actively keep their browsers upto date.

So what do you do if you want to take advantage of jQuery 2.0 but still need to support older IE browsers, well, jQuery themselves offer up a solution that uses IE Conditional Comments to target browsers older than IE9, supplying them with the jQuery 1.x fork and everything else with 2.x

<!--[if lt IE 9]>
<script src="jquery-1.9.1.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.js"></script>
<!--<![endif]-->

The problem with this approach is that it is IE specific and doesn’t take into account other older non-IE browsers that may also be incompatible with jQuery 2.0. Plus many developers hate the notion of having to use Conditional Comments to hack around IE issues.

We wondered if there was another way to better serve the appropriate jQuery version based on browser feature detection. The problem here is that there are no documented browser requirements that define when a browser is compatible with jQuery 2.0. However there is a method that applies this exact approach by Orde Saunders over at http://decadecity.net.

Orde has undertaken a great amount of research into the method and has come up with 2 similar JavaScript solutions (Synchronous and Asynchronous) that use 3 features as requirements for jQuery 2.0 compatibility. He detects for a JSON parser, IE7 does not have a native JSON parser, returning a typeof undefined response, this itself isn’t strictly an error so the next steps are to check for the document.querySelectorAll and addEventListener methods. Both IE7 and IE8 fail on detecting for addEventListener. IE7 fails when detecting for document.querySelectorAll

The code for the two methods is as follows:

Synchronous

<script>
   (function () {
   var js;
   if (typeof JSON !== 'undefined' && 'querySelector' in document && 'addEventListener' in window) {
   js = '[path to jQuery 2]';
   } else {
   js = '[path to jQuery 1.9]';
   }
   document.write('<script src="' + js + '"><\/script>');
   }());
 </script>

Asynchronous

<script>
   (function () {
   var s, s0, js;
   if (typeof JSON !== 'undefined' && 'querySelector' in document && 'addEventListener' in window) {
   	js = '[path to jQuery 2]';
   } else {
   	js = '[path to jQuery 1.9]';
   }
   s = document.createElement('script');
   s.type = 'text/javascript';
   s.async = true;
   s.src = js;
   s0 = document.getElementsByTagName('script')[0];
   s0.parentNode.insertBefore(s, s0);
   }());
</script>

Conclusion

Having two current forks of jQuery is without doubt going to cause confusion and frustration until developers become more educated on the facts, and using both versions to target compatible browsers is probably asking for more trouble than you need, requiring more testing and giving you debugging headaches.

Undoubtedly jQuery 2.0 gives us the first taste of a brave new world leaving legacy browsers where they belong and looking forward. It’s maybe just a little too soon be be used as your default JavaScript framework on a mass market site, jQuery 1.9 and the forthcoming 1.10 are probably your best bet for now.

Credit to: Orde Saunders and http://decadecity.net for the jQuery fallback script

Comments