25.7. How to make a dynamic CSS

A lot of people think that PHP can only be used to deliver dynamic HTML pages. This is by no means the whole story! Did you know, for example, that with PHP you can deliver dynamic CSS files? Forget all those multiple CSS for different browsers! You can maitain one CSS file, with PHP code in it - and PHP will interpret that code and deliver the right CSS to the right browser.

Again, the .htaccess file (see Section 25.4) plays a central role here: add this line to the .htaccess file in your PHP-Nuke root directory:

AddType application/x-httpd-php .css

This will instruct the Apache web server to parse .css files for PHP commands. Then add this line to the top of your CSS file:

<?php Header ("Content-type: text/css");?>

This makes sure that the .css file looks like a regular CSS file to anyone that asks. If you don't return a text/css header, Mozilla will refuse to include the file if the calling page has an XHTML or strict HTML doctype.

With these two changes in place, you can now use PHP everywhere in your CSS file. Conditional operations, function calls, and generally the whole PHP functionality is at your disposal!

You could for example have a link to 'printer-friendly.php' which would set a cookie (for say 10/20secs) and redirect back to the refering page. Your CSS file would then check the “printer” cookie and, if set, would produce a stylesheet that is more printer friendly:

<?php
if(isset($_COOKIE['printer'])) {
?> 
/* print styles here, turn off logos,
do in black and white or whatever */
<?php
} else {
?>
/* regular styles */
<?php
}
?>

Your browser does not notice!

Whether you use a dynamic CSS with PHP, or a static one, your browser will never notice - just as will never notice with other HTML files anyway! Why? Because all the "dynamics" take place on the server. As soon as PHP finishes its work with parsing the CSS file on the server, the browser gets served a CSS file that looks just about any other CSS file would do. The only difference is that this CSS is constructed on-the-fly, taking into account whatever dynamic parameters you told it to (cookies, user preferences, browser type etc.). Your browser will never notice and will cache it like any other CSS.

The above is of course just an example, since CSS already caters for alternative 'print-friendly' styles using the "media" attribute:

<LINK rel="stylesheet" type="text/css" href="/style.css">
<LINK rel="stylesheet" type="text/css" href="/print.css" media="print">

which, on the other hand, does not seem to be completely supported by all browsers for the moment.

Another interesting application of the dynamic CSS idea, is the construction of “theme variants”: different colour combinations for the same theme. Following the previous lines, you could set links somewhere in your pages, that would set a cookie and redirect back to the refering page. Your CSS file would then check the “style” cookie and, would produce the appropriate colours (see Server Side Scripting in CSS Files):

<?php
switch($_COOKIE['style']) {
  case "high_contrast":
  $bg="black";
  $fg="white";
  break;
case "silly":
  $bg="pink";
  $fg="red";
  break;
default:
  $bg="white";
  $fg="black";
  break;
}
?>
body {
background-color: <?php =$bg;?>;
color: <?php =$fg;?>;
}

The CSS file that you should modify for such actions, is the style.css file in the styles folder of your theme (see Section 14.1).