.css{user:agent;}

Looks like you're using…

Avoid CSS hacks!

CssUserAgent Demo

This page demonstrates the power of CssUserAgent. This feature applies User-Agent specific CSS classes to the <html> tag to allow browser-specific CSS variation without resorting to CSS hacks. Since these are performed once at startup, CSS may be statically defined without the need to mix browser-specific logic into the presentation.

Multiple classes are created for each user-agent, allowing the web developer to target browser classes on differing levels of granularity. The general pattern is browser name followed by version number of varying precision:

Customized presentation

Notice how the sidebar color scheme and browser icon change depending upon which browser you are using.

This is all done with CSS since cssua.js has prepped the HTML tag with special CSS classes which allow you to target browsers with varying degrees of precision.

<!-- the CSS classes currently applied to this page tag are: --> <html class=""> <head>…</head>
<body>…</body>
</html>

UserAgent map

UserAgent-sniffing is regarded as something to be used sparingly, but pragmatic developers know it is sometimes the simplest approach to fixing a particular browser's quirk. When it is, cssua.js produces a helper object as a side-effect which makes user-agent-siffing easier and more consistent.

An object map is also built which allows you to test the user agent from your script in a simplified manner that doesn't require string parsing. For example, this object is effectively produced:

cssua.userAgent = cssua.ua = { };

Try it out

Change the input userAgent value and watch how the key-value pairs and the CSS class names respond to the change. This gives you an idea of what to expect from browsers other than this one.

navigator.userAgent:

document.documentElement.className:

cssua.userAgent | cssua.ua:

Examples

Testing for older Internet Explorer has never been easier than this:

if (cssua.ua.ie < 8.0) { /* proof of Pareto principle here */ }

Or get a hint if this user might need a mobile experience:

if (cssua.ua.mobile) { /* consider your audience */ }

Remember to convert the version String to a Number with parseFloat if the value isn't a simple number, e.g., it has multiple decimal points or trailing letters. Otherwise JavaScript may interpret the value as NaN (not a number):

if (parseFloat(cssua.ua.chrome) > 101) { /* enter the Matrix */ }

Mobile browser detection

CssUserAgent helps detect the increasingly ambiguous category of mobile browsers. cssua.js adds specific classes when it detects mobile browsers:

<html class="… ua-mobile ua-mobile-iphone …"><html>

No browser hacks

This allows you to target the browser rendering engine (e.g. "webkit"), or a specific browser (e.g. "safari"). The version can be targeted at the major version number (e.g. "ie-5" includes 5.0, 5.5) or minor (e.g. "ie-5-0" includes only 5.0) all the way down (e.g. "ua-chrome-8-0-552-224") for a very specific case.

/* CssUserAgent lets you target specific browsers without CSS hacks */ .logo-area { background-image: url(logo.png);
background-repeat: no-repeat;
background-position: left top;
}

/* target IE 5.0, 5.5, 6.0 */
.ua-ie-5 .logo-area,
.ua-ie-6 .logo-area
{ /* IE versions < 7.0 don't fully support transparent 24-bit PNGs */
background-image: url(logo.gif);
}

Some browsers have multiple listings if the rendering engine is significant. For instance, Gecko-based browsers (such as Firefox, Mozilla, Netscape, Camino, SeaMonkey) also define Gecko CSS classes, to target all browsers of a specific Gecko version at once.

Below is an example of a number of browser labels which display differently under the presence of different CssUserAgent classes.