CSS/JS Browser Determiner

By : bit-labs Published On Wednesday, December 26, 2012, 02:02 In JavaScript

CSS/JS Browser Determiner
Live Preview Buy Now ($7) Add To Favorites

It’s lightweight (2kb gzipped or 3,8kb minified) JavaScript browser detector that can be used in all your web projects. It’s created to help you to write CSS or JavaScript code for any specific browser, version of browser or whatnot in a very easy way. Detect layout engine, OS, support for CSS features and more.

It is indispensable solution for building cross-browser and cross-platform web-sites and web-applications.

How it works? Very simple. It generates a list of classes with detailed information about browser, layout engine, OS, device and then attaches it to <html> tag.

Unlike well-known Modernizr, the CSS/JS Browser Determiner is mostly focused not on the browser features but on the browser and the device itself. But it also determines the support of common CSS features.

Browser Detection With CSS

.opera           .element {color:red} // All versions of Opera
.ie8             .element {color:red} // MSIE 8
.ie7_5           .element {color:red} // MSIE 7.5
.ie8-            .element {color:red} // MSIE 8 or less
.chrome24-       .element {color:red} // Chrome 24 or less (25 version is the maximum available)
.webkit          .element {color:red} // Webkit based browsers such as Chrome, Safari, IOS, Android etc.
.gecko18         .element {color:red} // Browsers that based on Gecko v18

.macos           .element {color:red} // Mac OS only
.windows         .element {color:red} // Any version of Windows
.win7            .element {color:red} // Windows 7 only
.pc              .element {color:red} // Any non-mobile computer including Mac OS
.mobile          .element {color:red} // Any mobile device
.desktop         .element {color:red} // Window width 980px or more
.iphone          .element {color:red} // iPhone
.ipad.landscape  .element {color:red} // iPad in landscape orientation
.android         .element {color:red} // Device with Android OS
.android.crmo    .element {color:red} // Chrome Mobile on Android OS
.mobile.tablet   .element {color:red} // Only mobile device with current width of the window from 768px to 979px

.boxsizing       .element {color:red} // Browser that supports the CSS3 box-sizing property
.no-gradient     .element {color:red} // Browser that does not supports CSS3 gradients

.cookie          .element {color:red} // Cookies enabled
.no-flash        .element {color:red} // Flash is not installed

... and so much more!

Browser Detection With JavaScript

if (browser.ie && browser.version <= 8 ) {
    // Code for MSIE 8 or less
}
if (browser.is_mobile) {
    // Code for mobile devices
}
if (browser.is_old) {
    // Code for old browsers such as:
    // MSIE 9 or less
    // Firefox 3.6 or less
    // Safari 3.0 or less
    // Opera 10.1 or less
}
if (browser.supports("border-radius")) {
    // Code for browsers that supports the CSS3 border-radius property
}
if (browser.is_desktop) {
    // Window width is 980px or more
}

And much-much more.

All CSS selectors

  • Browsers - chrome, safari, firefox, ie, konqueror, opera, operamobi, operamini, crmo, unknown
  • Browser version like: firefox18, firefox18-, firefox18_0 (but NOT firefox18_0- or firefox18_0_1234 or firefox18_0a1)
  • Layout engines: webkit, gecko, trident, presto, khtml
  • Layout version like: gecko18, gecko18_0 (but NOT gecko18- or gecko18_0_1 or gecko18_0a1)
  • Mobile devices: iphone, ipod, ipad, blackberry, kindle
  • Operation systems: windows, win8, win7, vista, xp, win2003, cros, unix, linux, ios, android, unknown_os
  • Basic CSS3 properties: opacity, gradient, borderradius, borderimage, animation, transition, transform, textshadow, boxsizing, boxshadow. Or no-gradient, no-borderimage etc…
  • Others:
    • pc, mobile (any non-mobile computer or mobile device)
    • desktop, tablet, phone (according to window width)
    • landscape, portrait (viewport orientation, according to window width and height)
    • retina, touchscreen (or no-retina, no-touchscreen)
    • cookie, flash, java (or no-cookie, no-flash, no-java)

JavaScript API

  • browser.is_modern — returns true if it’s a modern browser. Depends on whether browser supports the CSS3 transition property
  • browser.is_old — opposite of browser.is_modern
  • browser.is_mobile — returns true if it’s a mobile device
  • browser.is_pc — any non-mobile computer, including Mac OS
  • browser.is_desktop — window width 980px and more
  • browser.is_tablet — window width 768px to 979px
  • browser.is_phone — window width is 767px or less
  • browser.is_retina — returns true if it’s Retina display
  • browser.is_touchscreen — — returns true if it’s touchscreen device
  • browser.name — the name of the browser
  • browser.NAME — like browser.ie, browser.firefox etc. Returns true or undefined
  • browser.nameFull — returns the full name of the browser like “Firefox”, “Internet Explorer” etc.
  • browser.version — the version of the browser
  • browser.layout — the name of the layout engine, like “webkit”, “gecko”, “trident”, “presto”, “khtml” or “unknown”
  • browser.LAYOUT_NAME — like browser.webkit, browser.gecko etc. Returns true or undefined
  • browser.layoutFull — full name of the layout engine, like “WebKit”, “Gecko”, “Trident”, “Presto”, “KHTML” or “Unknown”
  • browser.layoutVersion — the version of the layout engine, like “533.1” for WebKit/533.1, “18.0” for Gecko/18.0, “18.0a1pre” for Gecko 18.0 Alpha 1 pre etc.
  • browser.os — returns the short name of the operation system, like “windows”, “macos”, “cros”, “unix”, “linux”, “ios”, “android” or “unknown”
  • browser.osFull — returns the full name of the operation system, like “Windows”, “Mac OS X”, “CrOS”, “Unix”, “Linux”, “iOS”, “Android” or “Unknown”
  • browser.osVersion — returns the OS version string, like “7” for Windows 7, “4.2” for Android 4.2 etc.
  • browser.device — returns the short name of the mobile device, like “iphone”, “ipad”, “ipod”, “blackberry” or “kindle”
  • browser.deviceFull — returns the full name of the mobile device, like “iPhone”, “iPad”, “iPod”, “BlackBerry” or “Kindle”
  • browser.supports.CSS_PROP — like browser.supports.opacity, browser.supports.gradient etc. Only predefined properties are alowed (“Common CSS properties” list). Please note that the second word must be capitalized like textShadow, borderRadius, boxSizing etc.
  • browser.mode — returns “desktop”, “tablet” or “phone” according to the current width of the window
  • browser.orientation — browser window orientation like “landscape” or “portrait”
  • browser.cookieEnabled — returns true if cookies are enabled in browser
  • browser.flashEnabled — returns true if Flash Player is installed and enabled in browser
  • browser.javaEnabled — returns true if JAVA is installed and enabled in browser
  • browser.width() — returns the width of the browser
  • browser.height() — returns the height of the browser
  • browser.supports("css-prop") — determine whether browser supports the CSS property.

Responsive Utilities

CSS/JS Browser Determiner is also supports basic responsive utilites for faster mobile-friendly development. You can use CSS selectors to determine the desktop, tablet or phone platform. It can be helpful if you need responsive support in Internet Explorer 8 (or less), which does not supports CSS3 Media Queries.

Live demo and full documentation

Changelog

Version 2.3 | 06 Feb 2014
- Minor bugfixes

Version 2.2 | 15 Dec 2013
- Fixed flash detection
- other bugfixes

Version 2.1 | 15 Oct 2013
- Fixed detection of Opera 15+, IE 11
- Switched back to “ie” property from “msie” in JavaScript API (so now it’s browser.ie)

Version 2.0.3 | 29 May 2013
- Live orientation (landscape, portrait) update for CSS

Version 2.0.2 | 24 May 2013
- Fixed detection of mobile devices

Version 2.0.1 | 11 May 2013
- Opera is moving to WebKit soon, so now we ready for that!
- Fixed a link to the documentation (moved to a new domain)

Version 2.0 | 23 Jan 2013
- Total reworking almoust from the ground up
- Even more powerful. Added support of new browsers, OS, layout engines, devices and other features
- New detection algorithm
- Now you can detect version of OS and layout engine with both CSS and JavaScript
- Updated demos
- New testing tool added (see Live preview)
- Replaced Firefox browser name from ”.mozilla” to ”.firefox”
- Replaced “ie” property to “msie” in JavaScript API (so now it’s browser.msie)
- Replaced Mac OS from ”.mac” to ”.macos”
- The same 4kb (minified)!

Version 1.0.5 | 01 Jan 2013
- Fixed window width detection

Version 1.0.4 | 28 Dec 2012
- Added OS: win8, win7, vista, xp
- Added Retina displays detection

Version 1.0.3 | 27 Dec 2012
- Added iOS detection support
- Fixed critical bug with Safari browsers
- Other changes and bug fixes

codecanyon-3697846-cssjs-browser-determiner.zip

Show More

You May Also Like