Ever wanted to use a set of css for just one browser, for example show different techniques for different browsers. Using php we can do this,

<?php 
 $user_agent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/Firefox.3.0/i',$user_agent)) {
 $browser = "ff ff30";
}
else if (preg_match('/MSIE.7/i',$user_agent)) {
 $browser = "ie ie7";
}
else if (preg_match('/MSIE.6/i',$user_agent)) {
 $browser = "ie ie6";
}
else if (preg_match('/Chrome/i',$user_agent)) {
 $browser = "chrome";
}
else if (preg_match('/Safari/i',$user_agent)) {
 $browser = "safari";
}
else {
 $browser = "in_unknown";
}
?>

That code would go at the top of a .php file.

To make it stick in the html of the site, we would add some php code into a html template.

<html>
<head>
<title>Website Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<?php 
 $user_agent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/Firefox.3.0/i',$user_agent)) {
 $browser = "ff ff30";
}
else if (preg_match('/MSIE.7/i',$user_agent)) {
 $browser = "ie ie7";
}
else if (preg_match('/MSIE.6/i',$user_agent)) {
 $browser = "ie ie6";
}
else if (preg_match('/Chrome/i',$user_agent)) {
 $browser = "chrome";
}
else if (preg_match('/Safari/i',$user_agent)) {
 $browser = "safari";
}
else {
 $browser = "in_unknown";
}
?>
</head>
<body class="<?=$browser?>">
<h1>The following box below will be styled differently in each browser, check it out</h1>
<div class="content-box">
 This box is unique to each browser
</div>
</body>
</html>

Save as index.php, below is the style.css file.

/* @group Internet Explorer */
 body.ie div.content-box {
 width:400px;
height:100px;
margin:0 auto;
 background:red;
}
/* @end */
 
/* @group Firefox */
 body.ff div.content-box {
 width:400px;
height:100px;
margin:0 auto;
 background:orange;
}
/* @end */
 
/* @group Chrome */
 body.ie div.content-box {
 width:400px;
height:100px;
margin:0 auto;
 background:blue;
}
/* @end */
 
/* @group Safari */
 body.safari div.content-box {
 width:400px;
height:100px;
margin:0 auto;
 background:red;
}
/* @end */

Hopefully that gives you some thought of how to target individual browsers, by having a little php coding. Remember you need to name your pages with .php as the file type and your web server needs to be php enabled.

Thanks for reading.

Article courtesy of .net magazine

Post to Twitter