jQuery

jQuery looks something like this in syntax:

if($.browser.msie) {
  // do something IE specific
}

Here’s how it’s actually implemented:

browser: {
  version: (/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/.exec(userAgent) || [0,'0'])[1],
  safari: /webkit/.test( userAgent ),
  opera: /opera/.test( userAgent ),
  msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
  mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
}

jQuery takes a pretty simple user-agent parsing approach. All jQuery supports (though deprecated officially) is the rendering engine, and version. Noteworthy is that “safari” is used as opposed to “webkit“. This is important in the case of Google Chrome etc. which you would detect using the poorly named “safari“. No support for detecting mobile browsers, though that could be added pretty easily.

jQuery is pretty bare bones, but the tightest of the implementations. It’s also the only one I’m aware of that has deprecated this functionality. The one thing I occasionally miss is OS detection (helpful when Linux lacks a few things like good Flash support). I supplement it with:

var jQbrowser = navigator.userAgent.toLowerCase();
jQuery.os = {
  mac: /mac/.test(jQbrowser),
  win: /win/.test(jQbrowser),
  linux: /linux/.test(jQbrowser)
};

Then use it like this:

if($.os.linux) {
  // do something for Linux
}

MooTools

MooTools syntax looks something like this:

if(Browser.Engine.trident) {
  // do something IE specific
}

It also supports a few other attributes such as Platform, Browser.Features.xpath (XPath supported?) Browser.Features.xhr (xmlHttpRequest supported?), and Browser.Plugins.Flash.version (Flash version).

Here’s how the core of it is implemented (I’m omitting the extras):

var Browser = $merge({

  Engine: {name: 'unknown', version: 0},

  Platform: {name: (window.orientation != undefined) ? 'ipod' : (navigator.platform.match(/mac|win|linux/i) || ['other'])[0].toLowerCase()},

  Features: {xpath: !!(document.evaluate), air: !!(window.runtime), query: !!(document.querySelector)},

  Plugins: {},

  Engines: {

    presto: function(){
      return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925));
    },

    trident: function(){
      return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? ((document.querySelectorAll) ? 6 : 5) : 4);
    },

    webkit: function(){
      return (navigator.taintEnabled) ? false : ((Browser.Features.xpath) ? ((Browser.Features.query) ? 525 : 420) : 419);
    },

    gecko: function(){
      return (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19 : 18);
    }

  }

}, Browser || {});

MooTools choose feature detection rather than User Agent sniffing. This approach takes care of the problem with spoofed request headers, but is failtastic when using an unsupported method. MooTools users need to upgrade ASAP. This will be problematic with the upcoming Firefox 3.6 release.

Prototype.js

Prototype’s syntax looks something like this:

if(Prototype.Browser.IE){
  // do something IE specific
}

Here is what the implementation looks like:

  Browser: (function(){
    var ua = navigator.userAgent;
    // Opera (at least) 8.x+ has "Opera" as a [[Class]] of `window.opera`
    // This is a safer inference than plain boolean type conversion of `window.opera`
    var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
    return {
      IE: !!window.attachEvent && !isOpera,
      Opera: isOpera,
      WebKit: ua.indexOf('AppleWebKit/') > -1,
      Gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
      MobileSafari: /Apple.*Mobile.*Safari/.test(ua)
    }
  })(),

It’s pretty similar (though not identical) to jQuery with the most notable exception being the addition of MobileSafari and object detection for IE.

YUI

The syntax in the YUI world is like this:

if (Y.UA.ie > 0) {
  // do something IE specific
}

The implementation is the longest I’ve seen:

ua = nav && nav.userAgent,
if (ua) {

  if ((/windows|win32/i).test(ua)) {
    o.os = 'windows';
  } else if ((/macintosh/i).test(ua)) {
    o.os = 'macintosh';
  }

  // Modern KHTML browsers should qualify as Safari X-Grade
  if ((/KHTML/).test(ua)) {
    o.webkit=1;
  }
  // Modern WebKit browsers are at least X-Grade
  m=ua.match(/AppleWebKit\/([^\s]*)/);
  if (m&&m[1]) {
    o.webkit=numberfy(m[1]);

    // Mobile browser check
    if (/ Mobile\//.test(ua)) {
      o.mobile = "Apple"; // iPhone or iPod Touch
    } else {
      m=ua.match(/NokiaN[^\/]*|Android \d\.\d|webOS\/\d\.\d/);
      if (m) {
        o.mobile = m[0]; // Nokia N-series, Android, webOS, ex: NokiaN95
      }
    }

    m=ua.match(/AdobeAIR\/([^\s]*)/);
    if (m) {
      o.air = m[0]; // Adobe AIR 1.0 or better
    }

  }

  if (!o.webkit) { // not webkit
    // @todo check Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fi; U; ssr)
    m=ua.match(/Opera[\s\/]([^\s]*)/);
    if (m&&m[1]) {
      o.opera=numberfy(m[1]);
      m=ua.match(/Opera Mini[^;]*/);
      if (m) {
        o.mobile = m[0]; // ex: Opera Mini/2.0.4509/1316
      }
    } else { // not opera or webkit
      m=ua.match(/MSIE\s([^;]*)/);
      if (m&&m[1]) {
        o.ie=numberfy(m[1]);
      } else { // not opera, webkit, or ie
        m=ua.match(/Gecko\/([^\s]*)/);
        if (m) {
          o.gecko=1; // Gecko detected, look for revision
          m=ua.match(/rv:([^\s\)]*)/);
          if (m&&m[1]) {
            o.gecko=numberfy(m[1]);
          }
        }
      }
    }
  }
}

This seems a little excessive, especially for UA parsing, though the detection of AdobeAIR and Opera Mini is a nice touch. The code being well commented is nice though.

Conclusion

So there you have it. Unlike many of those websites that don’t use a library, these JS code bases don’t rely on document.all and/or window.xmlHttpRequest^[1] to do it all.

1. For those wondering xhr is to tell IE7+ from previous IE versions.