The two most recent versions of jQuery: v2.0.2 and v1.10.1 have an identical API but are actually very different; v1.10.1 still supports older browsers, specifically IE6-8 (it includes a lot of fallback code that modern browsers do not need) while v2x does not. This means that jQuery v2x (83.5kb minified) is about 10% smaller in filesize than v1x (92.7kb minified) and we, as good front-end developers, can make sure that whomever is using a site that we’ve built, does not receive a version of jQuery that is too large for their browser and thereby reducing overall page weight.
To solve this problem, we are going to use conditonal comments; and if you’re familiar with HTML5 Boilerplate you will have used these before, so all we need to do is provide one version for older browsers and one for new.
<!--[if lte IE 8]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="/js/libs/jquery.min.js"><\/script>'); </script> <![endif]--> <!--[if gt IE 8]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2jquery.min.js"></script> <script> window.jQuery || document.write('<script src="/js/libs/jquery.2.min.js"><\/script>'); </script> <!--<![endif]-->
The first comment block above provides code for IE 6-8:
[if lte IE 8] (if less than or equal to IE 8); the second provides code for IE 9+ and all other browsers:
[if gt IE 8] (if greater than IE 8). You will see that I am also providing a local fallback version of each file in case the CDN version fails, this is consistent with the HTML5 boilerplate recommendation.