Zepto fallback to jQuery

Question

I'm using ZeptoJS for my web app, but I'd like to fall back to jQuery if the browser doesn't support Zepto. Since IE is the only major browser not supported at the moment, I'm tempted to detect IE:

if(navigator.appName == 'Microsoft Internet Explorer'){
    // load jquery
} else {
    // load zepto
}

but I'd prefer to specificly detect Zepto support and use jQuery in other cases. Is there a feature detection way to do this?

Answer 1

You can also use JS trick described here to detect whether browser is IE, and use a modern asynchronous script loading library to load the required lib. Yepnope example:

yepnope({
  test: !+"\v1", // IE?
  yep: 'jquery.js',
  nope: 'zepto.js'
});

Answer 2

Rather than doing that with Javascript, I'd take it one step ahead and use conditional statements. This could look like:

<!--[if lt IE 8 ]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<![endif]-->

<!--[if !IE]>
    <script src="/js/zepto.js"></script>
<![endif]-->

This goes right into your HTML files. The above snippet will load jQuery, if the browser is Internet Explorer 7 and below. Otherwise it'll include zepto.js.

Answer 3

As Zepto Documentation said, if you need to detect Internet Explorer you can use this code:

  if ('__proto__' in {}) {
    // IS NOT IE

  } else {
    // IS IE

  }

Zepto use it to fall back on jQuery, but I have use it as browser detection too.

Answer 4

This might be a crazy idea (I'm not sure if Zepto will even load on an unsupported browser), but what about using Zepto's own browser detection to see if it's on an unsupported browser?

$.os.ios      // => true if running on Apple iOS
$.os.android  // => true if running on Android
$.os.webos    // => true if running on HP/Palm WebOS
$.os.touchpad // => true if running on a HP TouchPad
$.os.version  // => string with version number, "4.0", "3.1.1", "2.1", etc.
$.os.iphone   // => true if running on iPhone
$.os.ipad     // => true if running on iPad
$.os.blackberry // => true if running on BlackBerry

Maybe you could do something like this:

var isSupported = false;
for (os in $.os) {
    if ($.os[os] == true) { isSupported = true; }
}

This won't catch chrome/firefox, which work fine with Zepto, but it does match the Zepto team's intentions for the thing, which may or may not be better.