Two versions of jQuery?
Why can't we serve separate versions for different browsers?
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.