CSS/JS Browser Determiner
- Last Update
- 30 May 2013
- Regular License
- $6
- Extended License
- $30
- Sales
- 27
It is a lightweight (3,9kb) JavaScript library that can help web-developers, especially HTML/CSS coders, to easily write CSS or JavaScript code for any specific browser without any CSS hacks. 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 the detailed information about browser, layout engine, OS, device and then attach 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.msie && 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.msie, 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.0.3 | 29 May 2013 - Live orientation (landscape, portrait) update for CSSVersion 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” propery 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