the corner office

In addition to ticking off lots of other niggles on the TODO list, I got the style sheet switching functionality done on the new blog design.

I started off with a pure JavaScript solution, based on an article at A List Apart. I got that working, but then redid it slightly differently. The ALA method specifies alternate stylesheets, and toggles between them on the client side. This is nifty (I'd never noticed, for example, that Firefox allows you to switch between provided stylesheets, or disable them completely, using the View > Page Style menu), but I noticed that Firefox sometimes had some perceptible delays in rendering using a stylesheet, resulting in a very flickery page load.

I also wasn't crazy about specifying all the style sheets at once. I'm not sure if browsers prefetch each CSS file, (and too lazy to find out for sure), but I'm taking a guess that they do. Even though browsers cache the CSS and JavaScript files, it just seemed a little wasteful. Also, by having browsers load only the 'chosen' stylesheet, I can see in my logs which style sheets are used most.

I ended up relying on a much simpler solution. I added a simple EL function to the standard CSS JSP fragment to find the relevant cookie and place only the requested style sheet in the page. A back-end map of styles is property-driven, so it's fairly easy to extend without touching code. A few extra cycles on the server side, but worth it for the flexibility.

I also built up a style sheet echoing the current style. Wasn't too hard to do, and I even managed to carry the venerable old logo across as well!