DrieStone Design
The Portfolio of Jonathan Sweet
If you’re a Web developer, you’ve probably read various methods for filling the need for a scriptable CSS style sheet. Most are a variation on a theme, here I present my preferred method, that is unlike others I’ve read (and it does some pretty cool stuff too). I’ve been using the core of my scriptable CSS system for six months now, and I have found it invaluable to the way I work.
The core need of a CSS scripting system is the need for a color substitution system that would streamline color selection for the web sites I’m working on. Most of the other scriptable CSS systems do exactly that, so we’re not breaking new ground here. Since many of the sites I work on are high bandwidth, heavy usage sites, I need to minimize the server hit as much as possible. Reducing external files, and limiting the calls to the database and PHP are the name of the game here. My tertiary concern is to make the editing of my scripting system as easy and transparent as possible.
Avoiding the Overhead
The issue with many of the other “CSS scripting” systems is that since they rely on PHP at run-time the files need to be processed through PHP each time they are loaded (which means there is additional server load, as well as additional non-CSS code buried in the file). Another (minor) issue is that all of your CSS files also end with “.php” which can make management problematic (especially because chances are your text editor is going to use its PHP syntax highlighter instead of its CSS highlighter). I wanted to avoid all of these issues. The solution here is simple, we compile to CSS once and load the “true” CSS file each time the page is loaded.
How Does it Work?
The core of the CSS scripting is a file I called the “FCSS” file. Because this file is not a PHP file, I can set a rule inside of BBEdit (or other editor) to use CSS syntax highlighting. I built a PHP helper function for my XHTML pages that inserts the correct XHTML code on the page to load my CSS file. I do this because my scripting system runs in two modes: “production” and “testing”. In testing mode my script attempts to compile the FCSS to a normal CSS file. In production the system circumvents the FCSS file and loads the compiled CSS file. This means that PHP is only loaded when I’m testing the CSS on the site, but when the pages get rolled out to production only the compiled CSS pages get called.
Syntax
The syntax inside the FCSS file is simple. I have adopted a function style syntax that allows me to use regular expressions inside my scripting engine to find data that I need to act upon. To support my primary goal, I have created a function called “color”.
Color Substitution
At the most basic level I wanted a system that would allow me to create a named color that I could use across all of my CSS files. For instance I may want to assign the hex color #c312F0 to the named color “background”. This would allow me to create a dictionary of color for each site that would allow me to quickly select the right color (and make global changes easily).
Within the config file for my web site I define an array of name/value pairs for colors I want to use for this particular site. The colors are passed off to the CSS scripting engine to be used
Color Calculations
Having a dictionary of colors used on a site is handy, but really not super useful (how many times will you really need to know the color of the background?) Being able to modify those colors on the fly would be very helpful. For instance perhaps I might want to make a popup box a darker version of the background color, or maybe I want to take the link color, rotate the hue and set that color to the link visited color. You can see how powerful having the ability to calculate colors would be.
Why stop there though? Why not give the author the ability to mix two colors together? Maybe take your background color and mix in a little bit of the link color to give the site credits a subtle look?
Instead of opening up Photoshop (or some other tool) and mixing the colors together, putting it into your CSS file, then testing it, you can write:
p.credits{color:color(background,m:link:25);}
…and if it’s not quite right, you can tweak the colors, and refresh the page until it’s perfect.
That is the power of scriptable CSS.
Down Sides
There are a few negative side effects of this system. The biggest issue is that you need to make sure that Apache has write access to create (or change) the compiled CSS files. Part of my script checks this and attempts to alert the user if there is an issue. A secondary issue (although only for some) is that using this compiled css, you lose the ability for run-time changes (although this can be easily overcome with a trigger on my PHP helper function). Honestly though, CSS doesn’t need real-time scripting. It’s not its job. That is what JavaScript is for.