CSS AutoLoad by George Huger

CSS AutoLoad is a PHP script to allow authors to use as many stylesheets as they wish, without adding complication or server requests.

CSS AutoLoad allows the author to include a single stylesheet on each page, while actually using an unlimited number of stylesheets. The browser will receive a single, compressed stylesheet and behaves normally.

In essence, CSS AutoLoad processes the CSS2 @import directive on the server side.

First thought: "@import works fine, why fix what isn't broken?"

Excellent point. It won't allow you to do anything you couldn't before, and it can't make toast.

Still, there's a few reasons, which may or may not matter to you. An article at A List Apart was the inspiration, and made me immediately want use it in my own web development projects.

Organization

Using the CSS AutoLoad technique allows the author(s) to use a single stylesheet, which references many others. This way, the website can receive all the benefits of a single stylesheet, without giving up the modularity and ease of editing given by using many stylesheets.

Bandwidth Savings

Optionally, CSS Autoload will strip the comments and whitespace from the combined css file. Additionally, the script will automatically enable gzip compression via PHP's zlib extension, if the visitors browser supports it. This way you can avoid sacrificing documentation for bandwidth savings and code obfuscation.

Caching

To reduce server processing, CSS AutoLoad employs file caching with a configurable expriration time. Just set the number of seconds to keep the cached copy, and CSS Autoload takes care of the rest.

Debugging

If enabled, CSS Autoload will output some basic debug information in CSS comments. This is to help quickly rule out the "I'm an idiot" errors, like uploading to the wrong directory, I seem to be prone to.

Cleaner Source, Mild SEO

The less code is in your HTML files, and the closer your content is to the top of your page the better. Why not save a few more lines by getting rid of multiple stylesheet includes.

You're a nerd

Thats the main reason I wrote this, because it was interesting. For some reason I think writing PHP is a lot of fun. $cool--;

This script was built primarily for my own usage in my personal and professional endevours. Its far from perfect, but I think its pretty cool.

It may be redistributed as long as all files in the distribution and all headers in the source remain intact.

It may be used free of charge, including commercial use, as long as all headers remain intact.

A link back to georgehuger.com is always appreciated, but not required.

Basic Usage:

1. Create a base css file which references the other css files you which to load. For this example, we'll call it base.css. In this file, place normal css import statements of the form:

   @import "style.css";
   

   and / or

   @import url('style.css');
   

   Mix an match as you like.
2. Create a cache directory to store the generated css file. CHMOD it to 777 and remeber to update the $cacheDir variable in the settings (more in step 4).
   
3. Put the following in your .htaccess file in the css directory:
   
   RewriteEngine on
RewriteRule ^base.css$ cssAutoLoad.php?css=base.css&salt=333 [L]
   Where base.css is the name of the CSS file you want to use to include all others, and salt is equal to the $salt value in cssAutoLoad.php (more in step 4).
   
4. Open cssAutoLoad.php and go to the 'Settings' section. Update the $cacheDir and $salt variables, and any others you like. Upload this file to your css directory.
5. Include base.css in your pages as you would normally.

• PHP 4
• Apache / .htaccess permissions
• Plenty of disposable income

• Zip File (4K)

Shouldn't this do javascript files too?

Yes, but its the weekend. I'll get to that soon. Don't be lazy, its an easy change.

Drupal does this too...

Problem: I don't use Drupal.

You can just turn on Apache's... and make this pointless.

OK.

Where do babies come from?

Outlook Not So Good.

I had a lot of help. Thanks to the following websites->people.

A List Apart: Frameworks for Designers

Excellent little article, we've been using a master stylesheet but hadn't implemented a good solution for stylesheet management. This article mentioned doing so server-side, and I wanted to be using such a script immediately. So here we are. Thanks StumbleUpon.

WebDigity: Caching Pages with PHP

Good little piece on a simple way to cache. I used the basic idea to implement caching here.

prettyghost's rose @ CoulorLovers

Color scheme I used for this page. Cheers!

Rounded Corners with jQuery

Easy corner rounding, which is integral to this page. Based on the amazing jQuery javascript library.

PHP CSS Compressor

Comment and whitespace removal thanks to these folks' pretty regexs.

George Huger

Everything else: Me, George Huger. Hope you enjoy it, thanks for reading.

Contact: If you have any feedback, email me at george@ill-k.com. Thanks!