Subscribe to Collegiate Chronicles        RSS Feed

Browser-specific CSS

Icon 5 Comments
It almost seems that each passing day brings a new browser to the market... or at least a new email about a new browser that one lonely person is using and something isn't displaying properly.

To date, I have a list of 19 browsers and 12 operating systems for a total of 228 possible ways to screw up a website layout. As one might imagine, things can get a little hairy.

Ok, a lot hairy. Very, very hairy. Like a Wookie mounting a Yeti.

Part of my job as the developer is appease EVERYONE... from Bob in North Dakota on his iPhone4 to Sally in Hawaii on her MacOS Safari installation to Marko in Greece using IE6 on a Vista machine. Everyone must be happy or my job isn't done.

Is it this conundrum that sent me on my quest for a solution. And I found one. So I thought I'd share. Please note this is NOT my code. It is code I have collected from other places on the web and after finding it all EXTREMELY useful, I thought I would share it here.

It starts with a short Javascript:
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);

Add the file call in the <head> of your page:
<script src="js/myfile.js" type="text/javascript"></script>

And set your CSS for whatever part of your code needs hacked (in my case, it was the main menu div):
.ie #main_menu {margin-top:0px;}
.gecko #main_menu {margin-top:3px;}
.chrome #main_menu {margin-top:19px;}
#main_menu {width:900px;}

If you need to specify certain code for when a specific browser is used with a specific OS:
.mac.safari #main_menu {margin-top:8px;}

Note: There is NO space between the .[os] and .[browser].

In your HTML, you will call the div as though the extra CSS doesn't exist:
<div id='main_menu'></div>

That's it!

Happy coding!!!

5 Comments On This Entry

Page 1 of 1


12 August 2011 - 07:55 AM
:/ It's sad that they want it to look the same. I embrace browser differences. I use every bit of CSS, that has browser specific syntax, as visual rewards. Those who don't support the properties, degrade gracefully. Also, sometimes, lets say in like IE 6 or 5, it's a good thing to present the page with no styling, then trying to display a page, with styling that's messed up. It can become confusing.

Sergio Tapia 

12 August 2011 - 08:01 AM
People who use IE6 don't care that that div on the left there isn't quite aligned perfectly. If they would they'd be using a newer browser. :P


12 August 2011 - 08:34 AM
Man, when is IE6 going to die?
if(MSIE6) {
  while(true) {
    alert("DIE IE6 DIE!!!");



13 August 2011 - 02:16 PM
That javascript function makes my head hurt.


13 August 2011 - 07:44 PM
it's all mashed together...formatting maybe?
Page 1 of 1

January 2021

24 252627282930

Recent Entries

Recent Comments

Search My Blog

0 user(s) viewing

0 Guests
0 member(s)
0 anonymous member(s)