The YUI Global Object: Browser Detection with UA
This example demonstrates how to access YUI's built-in user-agent information to learn things about the environment in which your code is running. This includes information like what browser, version, and operating system are being used; it also includes context information like whether you're code is running on a mobile browser, running in a secure page, or running under Adobe Air or Google Caja.
Note: We strongly recommend using feature detection rather than user-agent sniffing to fork code. Fork on the user-agent information only when absolutely necessary to do so (for example, in cases where browsers do not report their own capabilities accurately).
UA properties set for your browser:
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 UA
object to inform you of what browser your
page is being viewed in, but avoid using this technique unless feature detection
will not serve your purpose.
What UA looks like
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, with the exception of the mobile
property, which is a string value indicating the name of a supported mobile
device that was detected or null.
if (Y.UA.gecko > 0) {} // e.g. Firefox if (Y.UA.ie > 0) {} // Microsoft Internet Explorer // Or leverage boolean coercion -- 0 evaluates as false if (Y.UA.opera) {} // Opera if (Y.UA.webkit) {} // Safari, Webkit
if (Y.UA.gecko > 0) {} // e.g. Firefox if (Y.UA.ie > 0) {} // Microsoft Internet Explorer // Or leverage boolean coercion -- 0 evaluates as false if (Y.UA.opera) {} // Opera if (Y.UA.webkit) {} // Safari, Webkit
There's more information on the UA
object and value
ranges in the API
Documentation.
Instantiate YUI
<!-- include yui --> <script type="text/javascript" src="../../build/yui/yui.js"></script> YUI().use("node", function(Y) { // This method is in the core of the library, so we don't have to use() any // additional modules to access it. However, this example requires 'node'.
<!-- include yui --> <script type="text/javascript" src="../../build/yui/yui.js"></script> YUI().use("node", function(Y) { // This method is in the core of the library, so we don't have to use() any // additional modules to access it. However, this example requires 'node'.
User Agent Info
In this simple example, we use the each
to iterate the UA
object.
var results = Y.one('#demo'), ua = '', patform = ''; Y.each(Y.UA, function(v, k) { var info = k + ': ' + v; results.set('innerHTML', results.get('innerHTML') + '<p>' + info + '</p>'); if (v) { if (Y.Lang.isNumber(v)) { ua = info; } else { platform = v; } } }); results.set('innerHTML', results.get('innerHTML') + '<p>Your browser is ' + ua + ', ' + platform + '</p>');
var results = Y.one('#demo'), ua = '', patform = ''; Y.each(Y.UA, function(v, k) { var info = k + ': ' + v; results.set('innerHTML', results.get('innerHTML') + '<p>' + info + '</p>'); if (v) { if (Y.Lang.isNumber(v)) { ua = info; } else { platform = v; } } }); results.set('innerHTML', results.get('innerHTML') + '<p>Your browser is ' + ua + ', ' + platform + '</p>');