Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Browser Detection + Apply Classes to HTML Element

// jQBrowser v0.2: http://davecardwell.co.uk/javascript/jquery/plugins/jquery-browserdetect/
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       = $.browser.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   = $.browser.win();   // Microsoft Windows

//version

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

/* ----------------------------------------------------------------- */
			
if (mac == true) { 
	
	$("html").addClass("mac"); 
			
	
} else if (linux == true) {
	
	$("html").addClass("linux"); 
	
} else if (win == true) {
	
	$("html").addClass("windows");
	
}

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

if (userbrowser == "Safari") {
	
	$("html").addClass("safari"); 
	
} else if (userbrowser == "Firefox") {

	$("html").addClass("firefox"); 

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

	$("html").addClass("camino"); 

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

	$("html").addClass("aol"); 

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

	$("html").addClass("flock"); 

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

	$("html").addClass("icab"); 

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

	$("html").addClass("konqueror"); 

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

	$("html").addClass("mozilla"); 

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

	$("html").addClass("netscape"); 

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

	$("html").addClass("opera"); 

} else if (userbrowser == "Internet Explorer") {
	
	$("html").addClass("ie");
	
} else {}

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

Comments

  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. alex
    Permalink to comment#

    http://api.jquery.com/jQuery.browser/

    jQuery.browser
    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.support). jQuery.browser may be moved to a plugin in a future release of jQuery.

  3. MISSIRIA
    Permalink to comment#

    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 ?

  7. Kailas
    Permalink to comment#

    This code is not working can you please hlep me

  8. Sunil Rana
    Permalink to comment#

    Your given code is not working in my project.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```