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 }