1) Staging CSS:

@import “public.css”

html {background: url(staging-bg.png) 100% 50% repeat-y;}

2) Production.css:
@import “public.css”

3) Public.css: Style rules for the production environment

3) Use an Apache rewrite rule on staging servers to rewrite requests for production.css to requests for staging.css

This does cost an extra hop even in production, so it may not be optimal for production sites. One way to address this would be to setup a rewrite rule in production that rewrites requests for production.css to public.css. This saves the hop, but nothing breaks if the rule is omitted.

Foolproof… until the .htaccess file accidentally migrates itself to the production server. :-)

True, true. And to prevent that — provided I have the privileges — I would put the ‘Header’ line in a <Directory> section of my apache configuration file (httpd.conf).

<Directory /path/to/webroot>
Header add Link "</staging.css>;rel=stylesheet;type=text/css;media=all"
</Directory>


Now that the directive is safely stashed away from my development webroot, I’ve further reduced the possibility of accidental migration. Or at least I’ve passed the responsibility for it to my server admin ;)

By the way, how standard is it for Apache admins to enable mod_headers? I know my host has it, but I don’t know if it’s common practice.

We also use the coloured background idea to distinguish between test and production databases – just a bit of CSS in the database connection file does the trick.

Only problems with my approach (and things I had coded quickly):
- it only worked on Firefox 2, Windows. Then Firefox 3 came out and I dropped the project
- no support for other browsers (IE, Safari, Opera, …)

Great to see your approach on the subject … and the posted PHP solution in the comments here is neat too!

Thanks,
B!

- an accidental quote char in the stylesheet, breaking it in FF, and

- background: url (image.jpg) no-repeat 0 0;

in that last one, check the space after url. In FF this works, in IE it breaks.

Well actually that background url problem I usually spot right away because I know it so well. The accidental quote was a really hard one recently, because I use an elegant font in my stylesheet editor (topstyle). The quote (`) was hardly visible.

You can add custom headers is IIS too, details are on technet.