Browser.js

browser.js - Lightweight Browser & OS detection library (3kb)

View the Project on GitHub phpdude/browser.js

browser.js v0.1.1

browser.js makes it easy to write conditional CSS based on device operating system and web browser.

Online demo

You can go to online demo.

Examples

browser.js inserts css classes into <html> element.

Mac OS & Firefox

iPad Emulator & Safari

Mac OS & Google Chrome

Usage

Just include the script. The script then updates the <html> section with the appropriate classes based on os & browser names detected by platform.js.

<script src="lib/browser.min.js"></script>

Embeded class names

browser.js add classes to <html> element by masks

ua-#{ua}
os-#{os}
#{os}-#{ua}
ua-#{ua}#{version} (Major version number)

Example for Mac OS & firefox

ua-firefox
os-mac
mac-firefox
ua-firefox29

Support no-js/nojs <html> classes.

browser.js will remove no-js or nojs classes from <html> element.

Utilities

browser.noConflict()

Run browser.js in noConflict mode, returning the browser variable to its previous owner. Returns a reference to the browser object.

browser.js JavaScript methods

You can get browser detected classes by javascript api.

<script>
console.log(browser.classes());
</script>

browser.js doesn't remove any extra classes added in <html> section.

Usage

In your CSS you can use added browser.js classes for making elegant hacks for selected browsers. For example you can make hacks for all IE and IE6.

.ua-ie .adv {
    margin-top: 15px;
}

.ua-ie6 .adv {
    margin-top: 17px;
}

Contributor

Alexandr Shurigin (aka phpdude)

Thanks to

platform.js

platform.js used for browsers & OS detection capabilities.