19 Dec

first official IE8 mention

And it’s a good one! The IE team announced in a very good article that IE8 passes the Acid2 test.

The Acid2 test does not test CSS compliance. Instead, it tests that broken CSS is parsed in a consistent manner.

More info about Acid2

Well done Microsoft – let’s hope you keep the information coming (they’ve been notably silent so far about IE8) and that the info is as positive and important to web developers as this milestone is.

01 Oct

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:

!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:


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

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


foreach(array_reverse($matches[0]) as $match){
  $match=preg_replace('/\s+/',' ',rtrim(ltrim($match)));

header('Cache-Control: max-age=2592000');
header('Expires-Active: On');
header('Expires: Fri, 1 Jan 2500 01:01:01 GMT');
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 }