Making Browser Sense … dojo.isBrowser?
by Gerald Lopez

Every now and then, you’re going to run into a problem with a particular browser (I’m sure you know what I’m talking about), and so you need your JavaScript to adjust accordingly. Browser detection is the answer and here’s a short cookie on how you can do it using Dojo.

There are a few browsers that Dojo can detect. Not only does it detect them, but at the same time it will tell you the version. It’s really simple to implement; here’s a sample:

if( dojo.isIE ){
   console.log("Internet Explorer " + dojo.isIE);
} else if ( dojo.isFF ) {
   console.log("Firefox " + dojo.isFF);
} else if ( dojo.isMozilla ) {
   console.log("Mozilla " + dojo.isMozilla);
} else if ( dojo.isOpera ) {
   console.log("Opera " + dojo.isOpera);
} else if ( dojo.isSafari ) {
   console.log("Safari " + dojo.isSafari);
}

The code above will simply load into the console the name of the browser and its version. You can find more information on these Dojo properties by looking at the Official Documentation and scrolling down into the properties section.

The code above comes with the zip file of the example below. Now, let’s look at a simple use case for completeness.

A Quick Example

Problems with IE6 erupt when one wants to use PNGs instead of GIFs because of transparency rendering. Look at Fig. 1 below; the PNG is beautifully rendered in FF2-you can even see the background through the translucent purple petals. Now take the same image and try to render it in IE6 (see Fig. 2). To have a site degrade correctly so that the PNGs don’t become unsightly in IE6, you may want to have their GIF counterparts load instead as shown in Fig. 3. As you can see in Fig. 3, it may not be as pretty as Fig. 1, but it’s more aesthetically pleasing than Fig. 2. All this can be simply handled with some help from Dojo browser detection.

Download the code, and let’s see how to do this: browserdetect.zip

You should find 5 files named: browser.html (code from above), bg.gif, flower.html, flower.gif and flower.png.

Fig. 1 Nicely rendered PNG in FF2. Fig. 2 Horribly rendered PNG in IE6. Fig. 3 Rendered GIF alternative in IE6.

The code fragment below can be found in the file flower.html. As you can see, there are two calls to dojo.isIE: the first is to check if the browser is IE, and the second is to check if it is less than version 7. Once the browser type and version number are determined, the proper image is loaded. Despite the programmatic overhead, the clear advantage spares your audience from unsightly rendering, while still enhancing the user experience for those with more capable browsers.

// Used by addOnLoad()
function loadFlower(){
 
	// create a reference to the image object
	flowerImage = dojo.byId("flower") ;
 
	// Checks to see if the browser is IE and if the Version is less than 7
	if( dojo.isIE && dojo.isIE < 7 ){
	   flowerImage.src = "flower.gif" ;  // load gif image
	   console.log("Loaded flower.gif"); // tell the user
	} else {
	   flowerImage.src = "flower.png" ; // load png image
	   console.log("Loaded flower.png"); // tell the user
	}
}
 
// Run at load time
dojo.addOnLoad(loadFlower);

Lastly, don’t forget to add the loadFlower() function to dojo.addOnLoad().

More Reading

You may want to read the cookie by Sam Foster on dijit’s CSS sniff as it provides a CSS alternative to the example shown above.

Tags: ,

This entry was posted on Thursday, June 26th, 2008 at 1:20 pm and is filed under Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Making Browser Sense … dojo.isBrowser?”

  1. dante Says:

    in my never ending quest to remove as many bytes on the wire as humanly possible, I would suggest the following syntax for the loadFlower:

    var flower = dojo.byId(”flower”);
    flower.src = “flower.” + (dojo.isIE && dojo.isIE < 7 ? “gif” : “png”);
    console.log(’loaded ” + flower.src);

Leave a Reply

You must be logged in to post a comment.