3rd February 2004, mid-afternoon | Comments (35)
Safari users, who until recently were greeted with a “Downloading 1 of 94 images” message when viewing this site, will be pleased to hear I’ve discovered the joys of combining PHP and @import CSS files — the result of which is that I’ve been able to shrink my weather-banner-CSS from ninety-five static rules (ninety-five!), to two dynamically generated ones.
Of course everyone else benefits as well, I’ve effectively reduced the amount of weather-banner-CSS you guys have to download from 16k to around 300bytes — that’s a 98% drop in file size.
Pretty nice, eh?
Sure you’ll lose the ability to cache that style sheet (what with it being dynamically generated), but it’s only 300bytes, hardly a big hit.
So, how did I do it? Well actually two readers helped put me on the right track: first of all David pointed me at some Evolt articles about using .htaccess to parse PHP files as CSS, and then Chris Neale stepped in and pointed out all I needed to do was stick header('Content-type: text/css'); into a PHP file to achieve the same thing.
Each page on my site calls three style sheets, the second of which (scene-css.php) is actually a PHP file:
<style type="text/css" media="screen">@import "/blog/include/layout.css";</style><style type="text/css" media="screen">@import "/blog/include/scene-css.php";</style><link rel="stylesheet" type="text/css" media="print" href="/blog/include/print.css" />This PHP file takes the values my weather script (scene.php) spits out and creates the relevant CSS rules. It also uses the header function to declare the output of the file as CSS:
<?php// declare the output of the file as CSSheader('Content-type: text/css');// include the script that generates all the weather variablesinclude('blog/include/scene.php');?>#header #scene p {background: url('/blog/commonpics/<?=$daynight?>/<?=$scene_class?>.jpg') no-repeat top right;}#header {background: #fff url('/blog/commonpics/<?=$daynight?>/header-border.gif') repeat-x bottom left;}The output of which (as an example) is:
#header #scene p {background: url('/blog/commonpics/day/clear-2.jpg') no-repeat top right;}#header {background: #fff url('/blog/commonpics/day/header-border.gif') repeat-x bottom left;}And there you have it; two little rules. So much nicer than ninety-five. Thank you David and Chris.
Jump up to the start of the post ↑
A collection of miscellaneous links that don't merit a main blog posting, but which are interesting none-the-less.
Our enemies are innovative and resourceful, and so are we. They never stop thinking about new ways to harm our country and our people, and neither do we.— George W Bush (9)
Stuff from the intersection of design, culture and technology.(3)
A selection of blogs I read on a regular basis.