Inverted

Published 4 November 04 by Justin French, 8 comments

Ahhhh, CSS

If you ever needed just a little more convincing that CSS can save money and time, then look no further than here.

In no more than 15 minutes, I made a copy of my screen style sheet screen.css, named it white.css, stripped out any non-color or background-image styles, then went through the remaining 29 lines, entering an inverse (opposite on the color wheel) value for each color.

I then inverted the three images (the orange blob which is now blue and the comment balloon which is now black, and my head shot), uploaded the whole lot via FTP, and linked white.css after screen.css in my template.

I don’t need to remind you guys how long that would have taken with old-school font tags (or even inline CSS for that matter) – at least a day, maybe much more.

While I was there…

I added a query string with a date in it (?2004-11-04) to all my linked styles and scripts, which is more a preparation for future redesigns than anything else… even though the query string means nothing to the CSS file, changing it should force most browsers to reload the style sheet from the cache.

So on my next redesign, I just change the query string date in my templates, and there should be no need for messages like “please refresh your browser to load my new stylesheet”. Simple. Effective.

And the winner is…

I still prefer the old black design, and will probably switch back in a week or so. A style switcher could also be on the cards, even though I generally think they’re overkill.