As it turns out, there is easy no way around Internet Explorer’s faulty CSS handling. Most of the audience for this page consists of Linux and BSD users, and we all use browser flavors that are almost completely compliant with CSS2, so it wouldn’t seem to be that pressing of an issue, but the plain fact is, I’ve spent alot of time on the design of this page, and the fact that 90-something percent of the world can’t view it correctly…well, it bugs me.
The simplest answer is to specify a simpler (read: “dumbed down”) alternate stylesheet that Explorer can handle. So, being the accomodating guy I am, I set about making a nice one for IE users. Then I checked it on a Windows box, and the ugly truth hit me like a wet flounder across the nose–there’s no way to select stylesheets in Explorer. W3C regs suggest that all browsers have an onboard menu for switching stylesheets. The Gecko family all do, as do Netscape and Opera, but lo and behold, Explorer doesn’t. Joy.
Scratch another bright idea. Turns out that I can make all the alternates I want; there’s simply no way for Explorer to recognize them. What do they do all day up there in Redmond?
There’s another, somewhat obfuscated, approach similar to the “voice family” hack, but it involves tricking Explorer into sifting through several stylesheets until it finds one it assumes is the default, but that’s just…wrong somehow.
(In case you don’t know, the “voice family” hack works around Explorer’s box-model parsing bugs by feeding it a string of junk characters [in this case, “\”}\””] until it stumbles back onto its feet. No thanks.)
So basically, I’m stuck with regards to Explorer. I refuse to make design choices to accomodate bad code, especially when it comes from the largest consumer software company in the world. Why is it that every Free browser out there has nearly 100% CSS1 compliance, and yet a commercial behemoth like Microsoft can’t get it right? They should be the driving force for the adoption of new standards, but instead, they’re singlehandedly holding web development back by several years’ time. Go figure.
So, the only logical answer is to put links to the alternate stylesheets in the HTML itself. Easy enough, right?
Wrong. Go ahead and try it. Yep.
There’s no way to simply plonk a link down on the page and have it work. The link above, for example, will only take you to the stylesheet. What we need is a way to change the environment itself. Basically, that involves fetching the style elements, loading them, then (and this is the tricky part) retaining the settings. That means using cookies to some extent, which means Javascript. Paul Sowden wrote a script on ALA that’s perfect for this. All that’s left is to implement.
The basic idea is twofold: specifying the alternate stylesheets in the headers and linking to them in the body. Take a look at the source for this page in a separate window. Beneath the default stylesheet declaration, I’ve got each of the alternates specified with the syntax
<link rel="alternate stylesheet" title="Title" xhref="filename.css" mce_href="filename.css" />
The title is the important bit, since that’s what we’ll be referencing further down rather than the filename. Make sure that this block is the same in the headers for all pages you want affected by theme changes. Beneath all link properties (but still in the head), you’ll need to tell the system to reference the script like so:
<script type="text/javascript" xsrc="/directory/styleswitcher.js" mce_src="/directory/styleswitcher.js" >
Skip to the bottom, and you’ll see the relevant links in the second loopback div. The
a xhref="https://lonelymachines.org/wp-admin/post.php#" mce_href="https://lonelymachines.org/wp-admin/post.php#"
bit specifies a null location, then the
onclick="setActiveStyleSheet('Barsoom'); return false;"
bit (notice the trailing semicolon) calls the script to read the specified title from the head.
Simple enough, eh?
What I’m left with is a pretty nice themeable interface. Adding new themes is as simple as writing up the new stylesheet and plugging a reference to it in the headers. The Javascript is a bit of a clunky workaround, but it works, and since this site is centered on the idea of interface customization, the whole experience comes out as a nice (if unintentional) piece of synergy.
NP: From Such Great Heights, Postal Service