Stylehack

I frequently have scatterbrained ideas, some of which I can bludgeon into working and some not. Early in 2004 I began mulling over the concept of providing my web hosting clients with a very simple method of ‘customizing’ a simple, standards-compliant web template using CSS — without them having to know the first thing about CSS. Working by my usual credo of not ‘recreating the wheel’, I went in search of a script… Open Source or Commercial, either would work. There are a lot of nice packages out there but none were as basic as I wanted. A blog or CMS system is overkill for what I have in mind; its beyond the skill level of my target user to maintain (let alone learn), and therefore more than I want to support. Did I say I will be offering this for free or close-to-free for my hosting clients? What’s a girl to do? Create my own solution! Basically, a simple input form available via the cPanel that will allow them to change some basic CSS styling. Most importantly, it needs to be reallllllly simple… for me! Think: create once and forget about it. Think: require as little effort put into the creation process as possible. Always keeping in mind that I am not a programmer by even the most generous definition… just a fiddler. After sending out all 3 brain cells to find an idea (aka sleeping on it), one brave cell straggled back in with an excited glow… Dynamic CSS! As in “using variables to assign values to attributes”. Oh boy! Surely there is info on the web I can snarf up and use to make this happen. (Snarf being “use to educate myself”.) Well, if there ~is~ I sure couldn’t find it. I’m consider myself the Google Queen, but no matter what I searched I couldn’t find a discussion addressing this topic. What I did find was an old thread somewhere that said “Can’t be done; even if it could it shouldn’t be done [sic]“. Tsk tsk. That’s like putting a piece of raw antelope on the counter and telling my cat to leave it alone. Yeah, that’ll deter her. [It should be noted here that I recently stumbled across an entry on Dunstan's blog that related to using dynamic CSS, but it wasn't exactly from the direction I was considering. It also struck me as too convoluted, which probably means it was way over my head. Youngsters nowadays! I also recently noticed a blog, maybe TextPattern?, that uses variables to declare some styles; again, it isn't doing what I am talking about either, it simply echos some variables as inline styles in the templates.] Simply put, in my mind DYNAMIC CSS is nothing more than PARSEABLE CSS. There are three ways to achieve this goal: 1. Give the CSS stylesheet an .shtml extension; 2. Give the CSS stylesheet a .php extension; 3. Instruct the server to parse files with a .css extension. SHTML Extension A CSS stylesheet given an SHTML extension can contain X/SSI statements (as in “declaring variables” and echoing them in the styles declarations) and/or call includes (as in putting the variable declarations in an external file). If the CSS stylesheet calls an include that file must be given an SHTML extension IF it contains X/SSI statements (for instance, variable declarations). If the file being called does not need to be parsed, it can have whatever extension is applicable to that file. For instance, if you don’t need to hide styles from an older browser you could put an SSI include into this CSS stylesheet and bring in other styles that way. This CSS file serves up properly whether the web page calling it is HTML, SHTML or PHP. PHP Extension A CSS stylesheet given a PHP extension can contain whatever PHP statements you like, though for purposes of simple style changes it would be limited to declaring variables and using them. As with the SHTML version, you can include external files. If the CSS stylesheet calls an include that file must be given a PHP extension IF it contains PHP statements (for instance, variable declarations). If the file being called does not need to be parsed, it can have whatever extension is applicable to that file. For instance, if you don’t need to hide styles from an older browser you could put a PHP include into this CSS stylesheet and bring in other styles that way. This CSS file serves up properly whether the web page calling it is PHP, HTML or SHTML. Parseable CSS By using an AddHandler directive in .htaccess you can tell the server to parse your CSS files just like it does SHTML or PHP files. A Parsed CSS file works exactly as one give an SHTML extension insofar as it can use X/SSI as described above. However, it accepts includes with both an SHTML extension AND a CSS extension in terms of server parsing. Like the other methods of creating dynamic CSS a parsed CSS file is served up properly via HTML, SHTML and PHP files. Pros/Cons Naysayers might claim “This will cause the page to load slowly… think if the drain on the server’s resources… the sky is falling, the sky is falling!”. I think not. If your stylesheet is that large it needs some rethinking anyway! Your site coding probably needs some tightening up, too. The extra characters added to a CSS file to allow the use of variables should not have a deliterious impact on your server or the speed at which your site is served any more than using a full PHP-driven site does. If you server is so overloaded that it ~does~ happen… well, you need a new host. Say… Web-o-Mat.net eh? “-) The one thing I don’t like about the X/SSI version are the empty lines that end up at the top of your CSS file when someone views it in a browser, but that’s a livable drawback to my mind. I do think the more elegant methods are the PHP or Parseable CSS solutions. Unless someone can show me that any of these options really ~do~ cause the sky to fall, I think they all are pretty handy for slapping in some very easy functionality in terms of allowing a non-web coder to change CSS styles on the fly. Not to mention that it opens up some very interesting possibilities for someone who is comfortable with PHP or X/SSI. As I fiddle with this more, I’ll try to remember to post what I’m doing here at Stylehack. At the rate I’m going, that will be in late 2007. (rolling eyes wildly) The remainder of this article is nothing more than 3 exercises demonstrating how to use each of these methods.