klog

…is now available to download and test.

According to the blog entry, IE8 is going to be very exciting for web developers. We can finally start ditching the old hacks built for IE7 and other lesser browsers.

It is not mentioned in that post, but IE8 will render in web standards mode by default. This means that IE8 will read your CSS and display it using as close as possible a rendering model based on W3C rules. This is in contrast to IE7 and below, where the standard was to display in “quirks” mode (using the MS version of the CSS model) and you had to jump through hoops to make it use standards mode.

IE8 aims to have full CSS 2.1 support. This is fantastic, as up to this point, there has been a great specification available, but designers could not use it to its full potential because IE simply wasn’t good enough for it. Microsoft is aiming to fix this deficiency …finally!

Some HTML5 elements will be available. I have not yet seen the list, but this again is a great new trick. HTML5 allows a designer to do some pretty funky things like this: <input name="email" type="email" required="required" />. That is something which at present would require a lot of supporting JavaScript.

I’m looking forward to this. It’s about time that IE grew up and joined the adult browsers such as Firefox and Opera.

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.

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 }