First, a word of caution

Please DO NOT use this in place of feature detection. Though many browsers have known JavaScript implementation quirks, it is bad practic and unsafe coding to make the assumption that because the page is being viewed in browser X that you can rely on feature Y being available. Check for feature Y if you need it.

Browser sniffing is an imprecise science, and relies on many things in the browser environment to be just right. Though many techniques are very accurate, 100% accuracy can't be guaranteed.

Use the YAHOO.env.ua object to inform you of what browser your page is being viewed in, but for your own sake, do not infer anything from this.

What YAHOO.env.ua looks like

YAHOO.env.ua is an object literal containing keys for most major user agents. The key corresponding to the current browser is assigned a version number. All others have value 0.

if (YAHOO.env.ua.gecko > 0) {} // e.g. Firefox if (YAHOO.env.ua.ie > 0) {} // Microsoft Internet Explorer // Or leverage boolean coercion -- 0 evaulates as false if (YAHOO.env.ua.opera) {} // Opera if (YAHOO.env.ua.webkit) {} // Safari, Webkit

There's more information on the YAHOO.env.ua object and value ranges in the API Documentation.

Bundled with the YAHOO Global Object

YAHOO.env comes bundled with the YAHOO Global Object and is used to keep track of what is known about the YUI library and the browsing environment.

If you are using any other YUI component on your page, you should already have YAHOO.env available. Otherwise, add the following:

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script>

The example: drag elements and rendering bugs

In this example, we'll add an iframe shim to a Drag and Drop element to account for a known display bug in Internet Explorer 6 regarding the z-indexing of select elements. For you folks out there not using IE6, here's a screen shot of the bug in action.

In this case, there is no way other than browser sniffing or conditional comments to address IE's rendering bug. We'll choose sniffing over using proprietary extensions.

Here's the markup for the example:

<div id="demo"> <select name="foo"> <option value="NONE" selected="selected">This is a very long select element for the example</option> <option value="1">Apple</option> <option value="2">Rutabaga</option> <option value="3">Motor oil</option> </select> <hr> <div id="dd1"> <p> NO IFRAME<br> Drag over the select </p> </div> <div id="dd2"> <p> IFRAME<br> Drag over the select </p> </div> </div>

Targeting a browser for certain action

Here, we create two Drag and Drop elements, then add the shim to the dd2 element if the page is being viewed in a vulnerable version of IE. Normally, of course, you'd add the shim behavior to both, but this will allow us to compare results.

YAHOO.util.Event.onDOMReady(function () { var dd1 = new YAHOO.util.DD('dd1'); var dd2 = new YAHOO.util.DD('dd2'); // Note the ua.{key} value must be above 0 to indicate a match if (YAHOO.env.ua.ie > 5 && YAHOO.env.ua.ie < 7) { // Create an iframe shim var shim = document.createElement('iframe'); shim.src = 'about:blank'; shim.className = 'shim'; // Add the shim to the dragging element on the first startDrag dd2.startDrag = function (x,y) { var d = this.getEl(); if (d.firstChild !== shim) { YAHOO.util.Dom.setStyle(shim, 'height',d.offsetHeight); d.insertBefore(shim, d.firstChild); } } } });

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.