PHP Code that switches stylesheets based on the browser viewing it.

[TheBrownRecluse]

I've gone through at least 5 websites and so far that I've found, I haven't seen any one of these php codes that actually works.

Here's one in particular

http://mikecherim.com/experiments/su...r_sniffer.phps

I've tried also doing conditional comments for IE and they doesn't seem to work either.

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../scripts/debtzero-ie7vista.css" />
<![endif]-->

Is there something in the code for this website as to why this may not work. I've tried everything I could, and I don't have the know-how to build code from scratch.

I've even switched some of the files between html and php extensions, and that doesn't work either.

What am I doing wrong?

[speed]

Firstly I'm guessing you want to change style sheet to get around IE bugs?

Therefore the best option I know is with comment conditionals, to do this create a style sheet that works in Firefox, then create a second CSS file for IE6 with just the fixes in it.

At this point you should have both sheets in your page and IE6 working with Firefox not e.g.

<link href="site.css" rel="stylesheet" type="text/css" media="all"/>
<link href="siteie.css" rel="stylesheet" type="text/css" media="all"/>

To now correct it so that the IE CSS is only used for versions of IE prior to 7 change the above to:

<link href="site.css" rel="stylesheet" type="text/css" media="all"/>
<!--[if lt IE 7]><link href="siteie.css" rel="stylesheet" type="text/css" media="all"/><![endif]-->

IE6 will load site.css then siteie.css while Firefox, IE7 and others will load just site.css.

As I've already said siteie.css should only contain the fixes so if in site.css you have:

.myblock {
width: 200px;
border: 1px solid #000;
color: #fff;
background-color: #000;
}

But for IE6 and before the width should be say 198px then in siteie.css you just have:

.myblock {
width: 198px;
}

All the other properties for that style are inherited from the definition in site.css

You don't need to use anything special on the server to do this, also IE7 more or less displays pages the same as Firefox and therefore you can use the same CSS for both browsers.

If you use the above method and find it still doesn't work then post a link to a test page so that we can see what is/isn't going on.

[DaveSawers]

If you use Gary Kieth's browser detection code from: Downloads :: Browser Capabilities Project

You can then use his php function to get all details about the browser into an array and then use that array in your page code to do anything you want. Here for example is a piece of code that switches pages when a mobile browser is detected. The mobile page is smaller, leaner, has a cleaner design for the small screen and different CSS.

$browser = php_get_browser();
if ($browser["ismobiledevice"]) {
/* Redirect to a different page for mobile device users */
$host = $_SERVER['HTTP_HOST'];
$uri = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
$extra = 'mobile/index.php';
header("Location: http://$host$uri/$extra");
exit;
}

function php_get_browser($agent = NULL){
$agent=$agent?$agent:$_SERVER['HTTP_USER_AGENT'];
$yu=array();
$q_s=array("#\.#","#\*#","#\?#");
$q_r=array("\.",".*",".?");
$brows=parse_ini_file("php_browscap.ini",true);
foreach($brows as $k=>$t){
if(fnmatch($k,$agent)){
$yu['browser_name_pattern']=$k;
$pat=preg_replace($q_s,$q_r,$k);
$yu['browser_name_regex']=strtolower("^$pat$");
foreach($brows as $g=>$r){
if($t['Parent']==$g){
foreach($brows as $a=>$b){
if($r['Parent']==$a){
$yu=array_merge($yu,$b,$r,$t);
foreach($yu as $d=>$z){
$l=strtolower($d);
$hu[$l]=$z;
}
}
}
}
}
break;
}
}
return $hu;
}


The code is simple to use and easy to modify to do anything you want.