Dynamic CSS with PHP - Grouping Browser Style Sheets
(Page 2 of 4 )
The first example I'd like to illustrate is using PHP to keep all the related styles together in one document. This way the directory won't grow cluttered with such files as styles-mozilla.css, styles-opera.css, styles-ie5.css and more.
Depending on the setup of your web server, the mime type of PHP output may be assigned text/html. However, the XHTML specification says style sheets are text/css. The first line of our script uses the header function to send an HTTP header and set the correct mime type.
<?php
header("Content-Type: text/css");
?> |
Next, the logic that detects the requesting browser and selects the appropriate style sheet would be moved into the style sheet script.
<?php
$browser = $_SERVER['HTTP_USER_AGENT'];
if (stristr($browser, "MSIE") || stristr($browser, "Internet Explorer")) {
/* browser is Internet Explorer */
} else
if (stristr($browser, "Opera")) {
/* browser is Opera */
} else
if (stristr($browser, "Mozilla")) {
/* Mozilla browser not specified above so default to NN or Mozilla */
} else {
/* default catch-all */
}
?> |
Many browsers list Mozilla in their browser identification strings for historical reasons even though they aren't necessarily the Netscape or Mozilla browsers. For example, Internet Explorer might produce "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)." That's why the code first tries to scan out such browsers first. If it gets towards the end of the control structure and hasn't matched such strings as MSIE, Internet Explorer, Konqeror and the like then it assumes the browser probably is Netscape Navigator or Mozilla.
It's necessary to mention that the value returned by HTTP_USER_AGENT isn't 100% accurate since it's possible for users to change the string they send when requesting web pages. There's always the people with nothing better to do than spoof their user agent string, but I personally feel it's generally the more tech-savvy users who do this when the need arises (such as to gain access to a home banking site which only supports Netscape or Internet Explorer but works fine in any competent browser). I certainly don't think it's the majority of the Internet surfing community who does this.
Finally, the style directives can be added. They can be outputted using either the standard syntax for echo or print quoted statements, heredoc syntax or by terminating the PHP blocks followed by CSS since the logical flow of the script remains intact. The choice is a matter of preference, though I prefer terminating the code blocks; I don't have to escape special characters and it's cleaner than heredoc.
Here are the steps combined to produce a dynamic style sheet based on browser detection. Remember to save the script with a .php extension or however else your server may be configured so the server realizes it must be parsed! And yes, I know they're pathetic style examples but they illustrate the point.
<?php
header("Content-Type: text/css");
$browser = $_SERVER['HTTP_USER_AGENT'];
if (stristr($browser, "MSIE") || stristr($browser, "Internet Explorer")) {
/* browser is Internet Explorer */
?>
body {background-color: white; }
p {font-family: arial, sans, sans-serif;
font-size: 10pt;
font-color: blue; }
<?php
} else
if (stristr($browser, "Opera")) {
/* browser is Opera */
?>
body {background-color: lightyellow; }
p {font-family: courier, monospaced;
font-size: 10pt;
font-color: darkgreen; }
<?php
} else
if (stristr($browser, "Mozilla")) {
/* Mozilla browser not specified above so default to NN or Mozilla */
?>
body {background-color: aliceblue; }
p {font-family: arial, sans, sans-serif;
font-size: 12pt;
font-color: darkblue; }
<?php
} else {
/* default catch-all */
?>
body {background-color: white; }
p {font-family: arial, sans, sans-serif;
font-size: 10pt;
font-color: black; }
<?php
}
?> |
The dynamic style sheet can then be called by an HTML document in the usual manner.
<link rel="stylesheet" href="styles-css.php"
type="text/css" /> |
Next: Environment Aware Style Sheets >>
More Miscellaneous Articles
More By bluephoenix
/ 30 
