variables in css

There is an article over at the Ruby On Rails site about Dynamic CSS. I read through it, and it was pretty cool. It occurred to me that it should be fairly simple to do some of those tricks on-the-fly with ordinary CSS files and a little PHP.

Look at this:

/*
!TEXTCOLOUR    #369
!BORDER        1px solid #369
*/

h1 { color: !TEXTCOLOUR; font-size: 1.1em }
p { color: !TEXTCOLOUR; font-style: italic }
div { color: !TEXTCOLOUR; border: !BORDER }

This, of course, is not valid CSS, but it would be cool if it worked.

Now it does!

Save this as /css_parser.php on your site:

<?php

if(!isset($_GET['css']))exit('/* please supply a "css" parameter */');
$filename=$_GET['css'];

if(strpos($filename,'..')!==false)exit('/* please use an absolute address for your css */');
$filename=$_SERVER['DOCUMENT_ROOT'].'/'.$filename;
if(!file_exists($filename))exit('/* referred css file does not exist */');

$matches=array();
$file=file_get_contents($filename);
preg_match_all('/^(!.*)$/m',$file,$matches);

$names=array();
$values=array();
foreach(array_reverse($matches[0]) as $match){
  $match=preg_replace('/\s+/',' ',rtrim(ltrim($match)));
  $names[]=preg_replace('/\s.*/','',$match);
  $values[]=preg_replace('/^[^\s]*\s/','',$match);
}

header('Cache-Control: max-age=2592000');
header('Expires-Active: On');
header('Expires: Fri, 1 Jan 2500 01:01:01 GMT');
header('Pragma:');
header('Content-type: text/css; charset=utf-8');

echo str_replace($names,$values,$file);

Then put this in your root .htaccess file:

RewriteRule ^(.*)\.css$ /css_parser.php?css=$1.css [L]

Isn’t that just so cool!? Now, every time you request a file that ends in .css, it will be pre-processed by the css parser.

The trick doesn’t have to be strictly about the value part of the CSS either – you can use it for full commands:

/*
!BlueText    color:#00f;
!Underlined  text-decoration:underline;
*/

a { !BlueText !Underlined }

And if that’s not enough – you can also use the variables to define other variables:

/*
!SelectedColour     #00f
!Text               color:!SelectedColour;
!Border             border:1px solid !SelectedColour;
*/

p{ padding: 10px; !Text }
div{ !Text !Border }