Detect and inject UA informations directly in your HTML

What is it

Sniff.js is an ultralightweight javascript browser sniffer that detects user's browser type, version and eventually mobile os type injecting this informations directly in the class attribute of the html element.

This informations can be very useful for CSS styling purpose, because you will be able to write different styling rules according to the browser you're using in the same CSS stylesheet.

You will need no more to create different stylesheets for different browsers (am i meaning IE?) and load them separately, you can put the rules all together.

How to use it

To use sniff.js you only have to put a reference to the js script in your HTML document's head element, like this:

<!DOCTYPE html>
<html>
	<head>
		<script src="sniff.js" type="text/javascript"></script>								
	</head>
	...

Finished!

You don't have to link any type of library or call any function, sniff will fire up on it's own.
After being fired up sniff will add two or three special classes to you html element:

  • <browser name>
  • v<browser version> (note there's a "v" before the version number)
  • <mobile OS type> (this class is added only if running on a mobile device)

Obviously <browser name>, <browser version> and <mobile OS type> will be replaced by the detected values.

For example, if you look at the source code of this page, you'll see that in the html element has been injected this classes:

<html class="">		
...

Example

Suppose you have a supersimple web page like this:

<html>
	<head>
		<title>Your title</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<script src="sniff.js" type="text/javascript"></script>
	</head>
	<body>
		<p>Some text</p>;
	</body>
</html>

And suppose you want (for unknown reasons) the p element background to be red ONLY WHEN the page is viewed with an IE 10 browser.
When you load the page with an IE 10 browser your html will be transformed into:

<html class="msie v10">

So you'll be able to write a specific CSS rule (in your CSS stylesheet file) that applies only to that case.
In our example you can put this simple rule in the style.css file :

.msie.v10 p{
    background:red;
}

Detectable browsers and mobile OS

Sniff.js can detect the following browsers and mobile OS:

Browser name Generated classname
Google Chrome chrome
Mozilla Firefox firefox
Apple Safari safari
Opera opera
Internet Explorer msie
Microsoft Edge edge
Mobile OS Generated classname
iOS iPad ipad
iOS iPhone iphone
iOS iPod ipod
Android android
BlackBerry blackberry
Opera Mini operamini
Windows Mobile iemobile

Javascript object

Sniff.js creates a global javascript object called sniff which contains 5 simple informations:

  • sniff.version: sniff release version
  • sniff.browserType: browser type (chrome, firefox, safari, opera, msie)
  • sniff.browserVersion: major number of version (e.g. if the complete version is 33.0.1750.146 here you have only 33)
  • sniff.browserVersionExtended: full number of version
  • sniff.mobile: mobile os type (ipad,iphone,ipod, android, blackberry, operamini, iemobile, null)
Name Description
sniff.version sniff release version
sniff.browserType browser type (chrome, firefox, safari, opera, msie)
sniff.browserVersion major number of version (e.g. if the complete version is 33.0.1750.146 here you have only 33)
sniff.browserVersionExtended full number of version
sniff.mobile mobile os type (ipad,iphone,ipod, android, blackberry, operamini, iemobile, null)