Grow your CSS skills. Land your dream job.

Last updated on:

Browser Detection + Apply Classes to HTML Element

// jQBrowser v0.2:
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(c/a))+String.fromCharCode(c%a+161)};while(c--){if(k[c]){p=p.replace(new RegExp(e(c),'g'),k[c])}}return p}('Ö ¡(){® Ø={\'¥\':¡(){¢ £.¥},\'©\':{\'±\':¡(){¢ £.©.±},\'¯\':¡(){¢ £.©.¯}},\'¬\':¡(){¢ £.¬},\'¶\':¡(){¢ £.¶},\'º\':¡(){¢ £.º},\'Á\':¡(){¢ £.Á},\'À\':¡(){¢ £.À},\'½\':¡(){¢ £.½},\'¾\':¡(){¢ £.¾},\'¼\':¡(){¢ £.¼},\'·\':¡(){¢ £.·},\'Â\':¡(){¢ £.Â},\'³\':¡(){¢ £.³},\'Ä\':¡(){¢ £.Ä},\'Ã\':¡(){¢ £.Ã},\'Å\':¡(){¢ £.Å},\'¸\':¡(){¢ £.¸}};$.¥=Ø;® £={\'¥\':\'¿\',\'©\':{\'±\':²,\'¯\':\'¿\'},\'¬\':\'¿\',\'¶\':§,\'º\':§,\'Á\':§,\'À\':§,\'½\':§,\'¾\':§,\'¼\':§,\'·\':§,\'Â\':§,\'³\':§,\'Ä\':§,\'Ã\':§,\'Å\':§,\'¸\':§};Î(® i=0,«=».ì,°=».í,¦=[{\'¤\':\'Ý\',\'¥\':¡(){¢/Ù/.¨(°)}},{\'¤\':\'Ú\',\'¥\':¡(){¢ Û.³!=²}},{\'¤\':\'È\',\'¥\':¡(){¢/È/.¨(°)}},{\'¤\':\'Ü\',\'¥\':¡(){¢/Þ/.¨(°)}},{\'ª\':\'¶\',\'¤\':\'ß Ñ\',\'¥\':¡(){¢/à á â/.¨(«)},\'©\':¡(){¢ «.¹(/ã(\\d+(?:\\.\\d+)+)/)}},{\'¤\':\'Ì\',\'¥\':¡(){¢/Ì/.¨(«)}},{\'¤\':\'Í\',\'¥\':¡(){¢/Í/.¨(°)}},{\'¤\':\'Ï\',\'¥\':¡(){¢/Ï/.¨(«)}},{\'¤\':\'Ð\',\'¥\':¡(){¢/Ð/.¨(«)}},{\'ª\':\'·\',\'¤\':\'å Ñ\',\'¥\':¡(){¢/Ò/.¨(«)},\'©\':¡(){¢ «.¹(/Ò (\\d+(?:\\.\\d+)+(?:b\\d*)?)/)}},{\'¤\':\'Ó\',\'¥\':¡(){¢/æ|Ó/.¨(«)},\'©\':¡(){¢ «.¹(/è:(\\d+(?:\\.\\d+)+)/)}}];i<¦.Ë;i++){µ(¦[i].¥()){® ª=¦[i].ª?¦[i].ª:¦[i].¤.Õ();£[ª]=É;£.¥=¦[i].¤;® ­;µ(¦[i].©!=²&&(­=¦[i].©())){£.©.¯=­[1];£.©.±=Ê(­[1])}ê{® Ç=Ö ë(¦[i].¤+\'(?:\\\\s|\\\\/)(\\\\d+(?:\\\\.\\\\d+)+(?:(?:a|b)\\\\d*)?)\');­=«.¹(Ç);µ(­!=²){£.©.¯=­[1];£.©.±=Ê(­[1])}}×}};Î(® i=0,´=».ä,¦=[{\'ª\':\'¸\',\'¤\':\'ç\',\'¬\':¡(){¢/é/.¨(´)}},{\'¤\':\'Ô\',\'¬\':¡(){¢/Ô/.¨(´)}},{\'¤\':\'Æ\',\'¬\':¡(){¢/Æ/.¨(´)}}];i<¦.Ë;i++){µ(¦[i].¬()){® ª=¦[i].ª?¦[i].ª:¦[i].¤.Õ();£[ª]=É;£.¬=¦[i].¤;×}}}();',77,77,'function|return|Private|name|browser|data|false|test|version|identifier|ua|OS|result|var|string|ve|number|undefined|opera|pl|if|aol|msie|win|match|camino|navigator|mozilla|icab|konqueror|Unknown|flock|firefox|netscape|linux|safari|mac|Linux|re|iCab|true|parseFloat|length|Flock|Camino|for|Firefox|Netscape|Explorer|MSIE|Mozilla|Mac|toLowerCase|new|break|Public|Apple|Opera|window|Konqueror|Safari|KDE|AOL|America|Online|Browser|rev|platform|Internet|Gecko|Windows|rv|Win|else|RegExp|userAgent|vendor'.split('|')))

/* ----------------------------------------------------------------- */

var aol       = $;       // AOL Explorer
var camino    = $.browser.camino();    // Camino
var firefox   = $.browser.firefox();   // Firefox
var flock     = $.browser.flock();     // Flock
var icab      = $.browser.icab();      // iCab
var konqueror = $.browser.konqueror(); // Konqueror
var mozilla   = $.browser.mozilla();   // Mozilla
var msie      = $.browser.msie();      // Internet Explorer Win / Mac
var netscape  = $.browser.netscape();  // Netscape
var opera     = $.browser.opera();     // Opera
var safari    = $.browser.safari();    // Safari
var userbrowser     = $.browser.browser(); //detected user browser

//operating systems

var linux = $.browser.linux(); // Linux
var mac   = $.browser.mac();   // Mac OS
var win   = $;   // Microsoft Windows


var userversion    = $.browser.version.number();

/* ----------------------------------------------------------------- */
if (mac == true) { 
} else if (linux == true) {
} else if (win == true) {

/* ----------------------------------------------------------------- */			

if (userbrowser == "Safari") {
} else if (userbrowser == "Firefox") {


} else if (userbrowser == "Camino") {


} else if (userbrowser == "AOL Explorer") {


} else if (userbrowser == "Flock") {


} else if (userbrowser == "iCab") {


} else if (userbrowser == "Konqueror") {


} else if (userbrowser == "Mozilla") {


} else if (userbrowser == "Netscape") {


} else if (userbrowser == "Opera") {


} else if (userbrowser == "Internet Explorer") {
} else {}

$("html").addClass("" + userversion + "");


  1. James W Cready
    Permalink to comment#

    Here’s a similar JS script that does not require JQuery: CSS Browser Selector by Rafael Lima.

    In addition to the selectors you have, this script adds many more. These include browser versions, whether or not javascript is on, and different OSs.

    Available OS Codes [os]:
    win – Microsoft Windows
    linux – Linux (x11 and linux)
    mac – Mac OS
    freebsd – FreeBSD
    ipod – iPod Touch
    iphone – iPhone
    webtv – WebTV
    mobile – J2ME Devices (ex: Opera mini)

    Available Browser Codes [browser]:
    ie – Internet Explorer (All versions)
    ie8 – Internet Explorer 8.x
    ie7 – Internet Explorer 7.x
    ie6 – Internet Explorer 6.x
    ie5 – Internet Explorer 5.x
    gecko – Mozilla, Firefox (All versions), Camino
    ff2 – Firefox 2
    ff3 – Firefox 3
    ff3_5 – Firefox 3.5 new
    opera – Opera (All versions)
    opera8 – Opera 8.x
    opera9 – Opera 9.x
    opera10 – Opera 10.x
    konqueror – Konqueror
    webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
    safari3 – Safari 3.x
    chrome – Google Chrome
    iron – SRWare Iron new

    Extra Codes:
    js – Will be available when js is enable, so you can show/hide some stuffs

  2. Permalink to comment#

    Description: Contains flags for the useragent, read from navigator.userAgent. We recommend against using this property; please try to use feature detection instead (see jQuery.browser may be moved to a plugin in a future release of jQuery.

  3. Very nice snippet thanks ;)

  4. Bhushan
    Permalink to comment#

    what about Chrome ??? :(

  5. Nick
    Permalink to comment#

    This is an older posting but take a look here for some good Chrome detection examples.

    Stack Overflow Q&A

  6. Snehal
    Permalink to comment#

    If we look at this chrome jquery there are also for different browser

    Is there any way to add chrome in the above js list ?

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".