Sniff.js - detect and inject browser infos

version 1.3

##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 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. ##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 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 creates a global javascript object called sniff which contains 5 simple informations:

Name	Description
`sniff.version`	Sniff.js 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`)

madferro / Sniff.js

Sniff.js - detect and inject browser infos

About