DigitalBonsai

Shaping the Web

Happiness is in the doing.

Dynamic CSS with PHP

When I finished reading The Zen of CSS Design I was excited about the use of IE hacks to apply browser specific styles in one stylesheet. No Javascript required to detect browsers and deliver one of many stylesheets. I found maintaining multiple stylesheets cumbersome. I'd always forget to update one of them. I started using the IE hack until I downloaded IE7 beta recently which breaks the hack, but still doesn't comply to standards enough to work like Firefox or Safari.

So, sufficiently annoyed at the idea of going back to multiple stylesheets, I started looking for a way to do PHP detection of the browser (as I mainly work with PHP enabled webhosting services). I figure at least then I don't have to build a "default" stylesheet in case the client had Javascript disabled. It then occurred to me that as I could change a php document's header type to text/xml as I've been doing with AJAX result generation, I should be able to change the header type to text/css just as easily. If I could do that, instead of maintaining multiple stylesheets with php selecting among them, I could use one stylesheet generated by php code by using the text/css mime type.

I used the following code to set up the page. I forget at the moment the URL where I found it originally. I promise to post it as soon as I can find it. I was searching for "PHP Browser Detection".

For example: Your browser is : OTHER

<?php
header('Content-type: text/css');
$browser = array (
"MSIE", // parent
"OPERA",
"MOZILLA", // parent
"NETSCAPE",
"FIREFOX",
"SAFARI"
);
$info[browser] = "OTHER";
foreach ($browser as $parent) {
$s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $parent);
$f = $s + strlen($parent);
$version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
$version = preg_replace('/[^0-9,.]/','',$version);

if (strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $parent)) {
$info[browser] = $parent;
$info[version] = $version;
}
}
?>

You then have two important pieces of information. The browser being used, as well as the version number. Helpful when trying to style for IE7 vs IE6. Here's how you check:

div#test {
width : 100px;
height : 100px;
<?php
if (($info[browser] == "MSIE") && ($info[version] == 7)) {
echo 'background : #F00;';
} else if (($info[browser] == "MSIE") && ($info[version] < 7)) {
echo 'background : #0F0;';
} else if ($info[browser] == "FIREFOX") {
echo 'background : #00F;';
} else {
echo 'background : #CCC;';
}
?>
}
Your browser is : OTHER

That should show a red box on IE7, green box on IE6 and earlier, blue box on Firefox, and gray box on everything else.

There it is. Dynamic stylesheet generation with php. Save the stylesheet externally and link to it in your html just like you would to a .css file. I do have a concern about browsers caching php files, or rather, not caching it. I don't want to lose the benefit of caching stylesheets. I'm sure it will be fine, but if it ever does present a problem, keep one stylesheet for definitions that work across browsers, and the more troublesome ones, have a separate php one. For now, I'm happy with the one php file. I wonder if this would be useful at all for Javascript. I am having some trouble with onKeyUp events in Firefox 1.5 after all...

Enjoy!