It is a lightweight (4kb) 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.
Simple Determining 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
.chrome22- .element {color:red} // Chrome 22 or less (25 version is the maximum available)
.webkit .element {color:red} // Webkit based browsers such as Chrome, Safari, IOS, Android etc.
.mac .element {color:red} // Mac OS only
.windows .element {color:red} // Windows only
.pc .element {color:red} // Any non-mobile computer, including Mac OS
.mobile .element {color:red} // Any mobile device
.iphone .element {color:red} // iPhone
.android .element {color:red} // Android
.desktop .element {color:red} // Desktop computer with window width 980px or more
.mobile.tablet .element {color:red} // Only mobile devices with window width 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 the CSS3 gradients propertyor 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 more. You can determine any version of the browser.
CSS selectors
- Browsers –
chrome,safari,opera,mozilla,ie,webkit,unknown - Browser virsion like –
chrome23,chrome23_0(but notchrome 23_0_1279_97orchrome23_0-),chrome23-,opera9_5etc. - Mobile devices –
iphone,ipod,ipad,android,blackberry,operamini,operamobile,winmobile,wince,symbian. - Operation Systems –
windows,macos,cros,unix,linux,unknown_os - Common CSS properties –
opacity,gradient,borderimage,borderradius,animation,transition,transform,textshadow,boxsizing,boxshadow. Or, if not supported:no-gradient,no-borderimageetc… - Responsive Utilities –
desktop,tablet,phone
JavaScript API
browser.is_modern— returns true if it’s a modern browser. Depends on whether browser supports the CSS3 transition propertybrowser.is_old— opposite of browser.is_modernbrowser.is_mobile— returns true if it’s a mobile devicebrowser.is_pc— any non-mobile computer, including Mac OSbrowser.is_desktop— window width 980px and morebrowser.is_tablet— window width 768px to 979pxbrowser.is_phone— window width is 767px or lessbrowser.name— the name of the browserbrowser.version— the version of the browserbrowser.os— returns the short name of the operation systembrowser.mode— returns “desktop”, “tablet” or “phone” according to the current width of the windowbrowser.chrome— returns true if it’s Chromebrowser.mozilla— returns true if it’s Firefox or any other Mozilla-based browserbrowser.ie— returns true if it’s Internet Explorerbrowser.opera— returns true if it’s Operabrowser.safari— returns true if it’s Safaribrowser.webkit— returns true if it’s Webkit-based browser such as Chrome, Safari, Maxthon, Android etc.browser.supports.opacity— determine whether browser supports the CSS opacity property. Only for predefined properties (see “Common CSS properties” list).browser.supports(prop)— determine whether browser supports the CSS property.
Responsive Utilities
CSS/JS Browser Determiner has also support the 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