no styleW3C: Old style | Chocolate | Midnight | Modernist
Steely | Swiss | Traditional | Ultramarine
(home | base | team | member)
Opera - UseIt - CNN

Lloyd's stylist - choose your page style

or bringing CSS back from the dead

2024 update: the original server has gone, as have most of the CSS styles being served around the web. this was of its time, and is no more.
2022 update: as this stands, it no longer works here on a secured https server, since it downloads stylesheets from another server. The unsecured original still works.

Aaahhhh.... cascading style sheets

Cascading style sheets offered the ultimate customisable view - reading text just the way you liked it, tweaked to be tailored to your comfort. Content. Structure. Presentation.

Unfortunately, what implementations of CSS actually delivered was a way for idiot fascist platform-specific 'web professionals' to serve you pages you can't read to your browser before promptly crashing it. There isn't a load default style option in browser preferences; you're lucky if you get some primitive text size and colour controls. These days you can 'skin' the 'interface' of your browser - those buttons and controls round the edges - but you have far less control over the bit in the middle that you're actually reading. You know, the hypertext that is the interface.

Meanwhile, style control is all at the server end, in the hands of people who don't know what your display or eyesight are like, and they override your express tastes every single time. Their content. Their structure. Their presentation. Inseparable. This is fine, when they're fully aware of what they're doing and weigh the consequences of their actions carefully. But when they aren't and don't... So you turn CSS off, giving the finger to the fascists the only way you can.

It would be something of an understatement to remark that CSS hasn't fulfilled its promise. Not when you have to turn it off to be able to read the web.

Details, details

There is more to the stylesheet implementation than you might think - or less, depending on your point of view. The thing is that Netscape (remember them?) implemented cascading stylesheets in Navigator 4.0 using the javascript engine they already had, because they were in a hurry and it was a quick hack.

You've probably noticed that you also need javascript enabled to view cascading stylesheets in Netscape. (You've then surfed with javascript or cascading stylesheets disabled ever since, because it makes the browsing experience more predictable and and the text a damn sight more readable.) That's why.

In fact, you've probably turned off CSS; there are an increasing number of sites, such as Forbes, where you need javascript turned on to do something as simple and basic as submit a form to search their site. That is incredibly mindbogglingly stupid, but that's the subject for another rant, another day. Client-side form validation can be done without breaking the interface for javascript-disabled browsers, but some idiot fascists haven't gotten that far.

So, you have little choice. Either grin and bear what CSS dictates, or turn it off. Redressing the balance would be good. Give the user choice! Let the user read the text the way she likes! Get away from that it's-a-printed-page-that-glows-in-the-DARK mindset!

So, choices.

Babelparam

A while back, Dean came up with user-customisable pages with Babelparam. That uses javascript and nothing but javascript to write out the style-specific elements of a page, based on parameters passed to the page. Let the user pick the parameter, and the user selects the look of the page, which is then redrawn. There's also an outliner function, based on commenting out parts of the page on the fly with javascript-written comments (oh, how browsers need outliners for large documents); all very nicely done.

Babelparam is a very neat demonstration of the limits of the possible, but it's far, far too heavy, complex and error-prone to modify for regular use on a page-by-page basis for most people. (Dean, as you may have gathered, is not most people. Admired his Amiga WorkBench 3.0 option?)

Reimplementing CSS-like functionality in javascript, line by painful line? Ugh.

So I found a simpler way.

Stylist

Since Netscape dictates that you have to have javascript turned on to use CSS, why not use the one to invoke the other?

Hence Stylist. Here you can choose which of the standard W3C Core Styles should be used to display this page - provided you have javascript and cascading stylesheets enabled, of course.

I've also thrown in a couple of other styles; if you're using, say, Netscape under Solaris, you'll be able to see how truly broken and platform-specific the house style used by CNN is.

How Stylist works

Javascript is used to write out just the stylesheet line in the header, based on a passed parameter. There's a bit of error-checking and server redirection involved to trap invalid parameter requests and avoid throwing up a 404 page instead of this page (and what idiot decided that having a missing stylesheet file should cause Navigator to display a 404 page, instead of just ignoring the 404 and the stylesheet altogether and displaying the page calling the errant stylesheet?), but even that's quite simple.

My Apache .htaccess file makes sure that this stylist page doesn't die on you when you neglect to select a valid parameter or otherwise play with the URL.

First we catch everything and redirect to a default old-school style: 

ErrorDocument 404 /Personal/L.Wood/styles/W3C/default.css
RedirectPermanent /Personal/L.Wood/styles/W3C/default.css http://www.w3.org/StyleSheets/Core/Oldstyle.css

Then we redirect for each of the known valid styles we're handling: 

RedirectPermanent /Personal/L.Wood/styles/W3C/Chocolate.css http://www.w3.org/StyleSheets/Core/Chocolate.css
RedirectPermanent /Personal/L.Wood/styles/W3C/Midnight.css http://www.w3.org/StyleSheets/Core/Midnight.css
RedirectPermanent /Personal/L.Wood/styles/W3C/Modernist.css http://www.w3.org/StyleSheets/Core/Modernist.css
RedirectPermanent /Personal/L.Wood/styles/W3C/Oldstyle.css http://www.w3.org/StyleSheets/Core/Oldstyle.css
RedirectPermanent /Personal/L.Wood/styles/W3C/Steely.css http://www.w3.org/StyleSheets/Core/Steely.css
RedirectPermanent /Personal/L.Wood/styles/W3C/Swiss.css http://www.w3.org/StyleSheets/Core/Swiss.css
RedirectPermanent /Personal/L.Wood/styles/W3C/Traditional.css http://www.w3.org/StyleSheets/Core/Traditional.css
RedirectPermanent /Personal/L.Wood/styles/W3C/Ultramarine.css http://www.w3.org/StyleSheets/Core/Ultramarine.css

and finally, we trap everything else. 

RedirectPermanent /Personal/L.Wood/styles/W3C http://www.w3.org/StyleSheets/Core/Oldstyle.css

The end result

Well, it all works. And in Internet Explorer, too. So, you can have some display choices with stylesheets. It's still not quite your choice, but it's mine - sort of. You see, I'm using Netscape under Solaris - so the font choices in the styles look nothing like what you might think, and even the W3C Stylesheets page is just screwy to read.

Forget bringing CSS back from the dead. I'm going back to turning CSS off.
Lloyd Wood (L.Wood@society.surrey.ac.uk)
this page last updated 23 March 2000