Subscribe to Collegiate Chronicles
5 Comments
Posted by
BenignDesign 
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:
Add the file call in the <head> of your page:
And set your CSS for whatever part of your code needs hacked (in my case, it was the main menu div):
If you need to specify certain code for when a specific browser is used with a specific OS:
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:
That's it!
Happy coding!!!
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!!!
Sources: Rafael Lima, 37 Signals, Bastian Allgeier
Categories: Uncategorized
Share This Entry:
5 Comments On This Entry
Page 1 of 1
EnvXOwner
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. 
Munawwar
12 August 2011 - 08:34 AM
Man, when is IE6 going to die?
if(MSIE6) {
while(true) {
alert("DIE IE6 DIE!!!");
}
}
Page 1 of 1
Tags
My Blog Links
Recent Entries
Recent Comments
Search My Blog
1 user(s) viewing
1 Guests
0 member(s)
0 anonymous member(s)
0 member(s)
0 anonymous member(s)
|
|
| 