YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: YAHOO Global Object: User Agent Detection

# YAHOO Global Object: User Agent Detection

This example demonstrates the use of `YAHOO.env.ua` to identify the user's browser and to branch JavaScript logic based on what browser is being used. (Note: We strongly recommend using feature detection rather than user-agent sniffing to fork code; only use this technique where it is absolutely necessary to do so — for example, in cases where browsers do not report their own capabilities accurately.)

View example in new window.

NO IFRAME
Drag over the select

IFRAME
Drag over the select

## 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 practice 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.8.0r4/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.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### YAHOO Global Object Examples:

- Type-Checking Your Data
- User Agent Detection
- Creating Class Hierarchies with `YAHOO.lang.extend`
- Creating a Composition-Based Class Structure Using `YAHOO.lang.augmentProto`
- Add Behavior to Objects or Static Classes with `YAHOO.lang.augmentObject`
- Combining Simple Data Sets with `YAHOO.lang.merge`

### More YAHOO Global Object Resources:

- User's Guide (external)
- API Documentation

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings