Firefox 3.6 is out. Go download it! If you need a reason, here’s a few things you’ll love about Firefox 3.6.

User Centric Features

UI Speed – Many things in the Firefox 3.6 UI have gotten faster. For example startup time has been improved thanks to various optimizations. My personal favorite is the awesomebar is now asynchronous, if you don’t know what that means, just trust me that it makes things feel faster if you have a slow hard drive like in a laptop.

JS/Video Speed Improvements – TraceMonkey, the fast JS engine has gotten some tweaks to improve performance even further. Seeking in <video/> is now much faster than it was in Firefox 3.5.

Focus – UI geeks will note that Firefox has had a few issues regarding focusing elements. Thanks to some refactoring it’s vastly simplified and improved.

Personas – Firefox has always supported theming, but it’s a complex process to build a theme and it’s prone to breaking as the UI evolves between versions. Personas is a light weight system to customize the look of the browser’s chrome.

Plugin Update Notification – A big cause of Firefox crashes, and security issues actually aren’t related to Firefox directly but plugins. Firefox can now notify you when you need to update a plugin helping you to keep your system as stable and secure as possible.

Full Screen For <video/> – Firefox can play native <video/> but thus far had no method to go full screen. Apple may want you to pay for “Pro” for full screen but with Firefox 3.6 you get it at no extra charge.

DLL Blacklist – To improve security/stability Firefox now has a DLL blacklist and can prevent other DLL’s from interfering with Firefox. This is Windows only at this time.

Opening Links In New Tab Position – When you opened a link in a new tab in previous versions it opened in a new tab on the far right, with lots of tabs open this created confusion as you may have several different tabs open on various things your doing. Now this will result in the new tab being created to the right of the current tab. If you don’t like this behavior you can set tabs.insertRelatedAfterCurrent to false. It takes a little getting used to, but it’s worth it.

For Developers

-moz-background-size – This is exactly what it sounds like. I’ve wanted to do this a few times in the past.

Poster frame for <video/> – Poster frames are now supported for <video/>. It’s a small bit of polish but will hopefully benefit design and perhaps even SEO down the line.

Web Open Font Format (WOFF) – Imagine an open font format that supported compression and meta data. Now imagine that a lot of font foundries have expressed support for it. WOFF!

async attribute for <script/> – It’s simple enough, the async attribute is now supported. Those who care about performance have wanted this for a long time.

Using Files from Web Applications – This is a huge step towards making web applications first class citizens. Hopefully we’ll see support for this in Google Docs at some point (one of the apps I think could best make use of this).

HTML5 Parser – Firefox 3.6 ships with an HTML5 parser, though it’s disabled for now by default. To enable set html5.enable to true.

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.