I’ve been working on a lot of sites that required certain css hacks and adjustments as of late and came up with a pretty good way to handle all of this without having to use a special style sheet.
The first thing thing you need to do is add a class name or names to the body tag in the HTML markup. My classes basically work as follows:
IE 6: <body class="browser_ie_6">
IE 7: <body class="browser_ie_7">
IE 8: <body class="browser_ie_8">
IE 9: <body class="browser_ie_9">
firefox: <body class="browser_firefox">
chrome: <body class="browser_chrome">
safari: <body class="browser_safari">
ipad: <body class="browser_ipad">
I’ll show you how to get these browsers with php here in a second but lets first get to how the css works.
Lets say you have a style sheet for forms on your web page and all your input fields with a class name of “textField” are 110px wide. Now lets say that in IE 7 they need to be 106px wide so they match your design.
To solve this all you need to do is something like this:input.textField{
width: 110px;
}
/* adjust for ie7 */
body.browser_ie_7 input.textField{
width: 106px;
}
Now you have successfully adjusted the size of the text box in only IE 7 without having to load a new style sheet. In addition, you don’t have to go looking around all kinds of css files to find where you made adjustments. If you have to change the default size to say 115 it is super easy to make the adjustments in other browser because their code is in the same place.
So how do I figure out my browser?
Well here is the php code:
<?php
function getBrowserInfo() {
$info = array();
$browsers = array ("IE", "OPERA", "MOZILLA", "NETSCAPE", "FIREFOX", "CHROME", "IPAD", "SAFARI");
$operating_system = array ("WIN", "MAC", "LINUX");
$info['browser'] = "UNKNOWN";
$info['version'] = "UNKNOWN";
$info['classname'] = "UNKNOWN";
$info['operating_system'] = "UNKNOWN";
foreach ($browsers as $browser) {
$s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $browser);
$f = $s + strlen($browser);
$version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
$version = preg_replace('/[^0-9,.]/','',$version);
if ($s) {
$info['browser'] = $browser;
$info['version'] = floatval($version);
$info['classname'] = 'browser_' . strtolower($browser);
if ($browser == "IE") {
$info['classname'] .= '_' . $info['version'];
}
break;
}
}
foreach ($operating_system as $os) {
preg_match("/$os/", strtoupper($_SERVER['HTTP_USER_AGENT']), $os_match);
if (isset($os_match[0])) {
$info['operating_system'] = $os_match[0];
}
}
return $info;
}
$template_body_class = getBrowserInfo();
?>
In your template you could do something like this:<body class="<?php echo $template_body_class['classname']; ?>">
Well that pretty much covers it so have fun!