CSS Browser Selector

One of the most time consuming activities during web development is ensuring cross-browser compatibility.   However rare, it is sometimes necessary to write CSS rules that target only a specific browser.  Not to mention, there are any number of other reasons one might wish to display something differently in an alternative browser.   I recently encountered a similar case and came across this nice little piece of code by Rafael Lima:

/*
CSS Browser Selector v0.4.0 (Nov 02, 2010)
Rafael Lima (http://rafael.adm.br)

http://rafael.adm.br/css_browser_selector

License: http://creativecommons.org/licenses/by/2.5/
Contributors: http://rafael.adm.br/css_browser_selector#contributors
*/
function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);

The latest version can be found here.

The code adds a class to the body tag of your page based on the user’s browser.  You can then write style rules to be used only by specific browsers like so:

.ie .sample {
	/* Internet Explorer */
}

.gecko .sample,
.chrome .sample {
	/* All Firefox versions and Chrome */
}

.opera .sample {
	/* Opera */
}

Depending on the user’s browser, the sample class will hold the corresponding attributes of one (or possibly none–if the browser is say, Safari) of the above rules.  The full list of available browser codes:

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
ff3_6 - Firefox 3.6
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

Incidentally, this useful little snippet was made into a WordPress plugin.

This entry was posted in CSS, Javascript and tagged , , , . Bookmark the permalink.
  • Delicious
  • Facebook
  • Reddit
  • StumbleUpon
  • Twitter
  • RSS Feed
  • Google
  • Digg

2 Responses to CSS Browser Selector

  1. Alyce Dimock says:

    I’m still learning from you, while I’m improving myself. I certainly liked reading everything that is posted on your blog.Keep the information coming. I enjoyed it!

  2. Testdrive says:

    This browser detection will fail with IE10

    better user feature detection insted of brwoser sniffing

    http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>