Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

MooTools 1.3 Browser Object

By David Walsh on October 14, 2010

MooTools 1.3 was just released and one of the big additions is the Browser object. The Browser object is very helpful in that not only do you get information about browser type and browser versions, you can gain information about the user's OS, browser plugins, and browser features. Let me show you how you can use the Browser object to detect browser feature!

View Demo

Checking Browser and Version

//check safari by property
if(Browser.safari) {  }

//check for ie by name
if(Browser.name == 'ie') {  }

//check for browser version
if(Browser.name == 'ie' && Browser.version == 7) {  }

//check for browser version by property
if(Browser.safari5) {  }

Checking for Plugins

//check for Flash and version
if(Browser.Plugins.Flash && Browser.Plugins.Flash.version > 9) {  }

Checking for OS

//check for windows by name
if(Browser.Platform.name == 'win') {  }

//check for mac by property
if(Browser.Platform.mac) {  }

Checking for Browser Features

//check for ajax abilities
if(Browser.Features.xhr) {  }

//check if this is Adobe AIR
if(Browser.Features.air) {  }

View Demo

The Browser object is a great utility for websites that rely on browser or feature presence, especially Flash or browser-specific functionality. Have any other items you think should be added to the Browser object? Share them and maybe they'll make it into the object!

Recent Features

By David WalshJuly 28, 2013
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...
By David WalshApril 25, 2011
Facebook Open Graph META Tags
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...

Incredible Demos

By David WalshDecember 19, 2008
MooTools Clipboard Plugin
The ability to place content into a user's clipboard can be extremely convenient for the user. Instead of clicking and dragging down what could be a lengthy document, the user can copy the contents of a specific area by a single click of a mouse.
By David WalshOctober 29, 2008
Element Position Swapping Using MooTools 1.2
We all know that MooTools 1.2 can do some pretty awesome animations. What if we want to quickly make two element swap positions without a lot of fuss? Now you can by implementing a MooTools swap() method. MooTools 1.2 Implementation MooTools 1.2 Usage To call the swap...

Discussion

Adam Meyer
Do you know if you can get better flash version granularity than just full number version (like 10 =) – I have done some stuff lately that requires 10.1 and would be nice to be able to check for that.

David Walsh
I’ll look into that Adam!
Fabian Beiner
Sadly MooTools only gives you version and build number. So I have 10,1,85,3 installed, where Browser.Plugins.Flash.version equals 10 and Browser.Plugins.Flash.build equals 85.

Arian
Be careful with using the Browser object, and especially with Browser sniffing. 9 out if 10 cases Feature detection will be sufficient. You cannot thrust the UA String (which is Browser.js) using. A user can manually set the UA string to IE6 while it’s actually Firefox, or some IE spinof might use another UA string while it has the quirks of IE. Libraries like Has.js (http://github.com/phiggins42/has.js) and Modernizr will help you with this. Of course the Browser.Features object can help you with this as well.
Jani Peltoniemi
You might want to fix the protocol in the url of the image link :)
Fernán
Very nice code as always, thanks David !
DarkNaruto
Very nice browser :) Browser.Plugins.Flash.version equals 10 and Browser.Plugins.Flash.build equals 85 , which one should I go for? Can i subtitle them by Adobe Flash 10 ?

David Walsh

I looked more into the Flash version detection stuff and it’s a nightmare of possibilities. The code that matches the version is as follows:

var version = (Function.attempt(function(){
	return navigator.plugins['Shockwave Flash'].description;
}, function(){
	return new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version');
}) || '0 r0').match(/\d+/g);

Browser.Plugins.Flash = {
	version: Number(version[0] || '0.' + version[1]) || 0,
	build: Number(version[2]) || 0
};

//example return values:
//["10", "1", "85"]
//["10", "0", "45", "2"]

Let me know if you find some awesomeness we can add to Moo!