Thursday 7/15/2004
Implementation

I’m intrigued by the possibilities of user stylesheets , currently supported reasonably well by the Mozilla browsers (although I have to bounce Firefox 0.8x to see changes; I haven’t investigated the capabilities of other browsers). The basic idea is that in addition to the site author’s stylesheet, you should be able to apply a stylesheet of your own choosing/making to whatever site you like, thereby changing fonts, colors, layout, what have you to suit your as-yet-nascent nefarious aims.

Eric Meyer had a post or two related to this a while ago, regarding ” css signatures ” for sites. He advocated putting an id on the body tag, wherein the site is identified. For example, I might put an id on this site’s body tags of misterjon-com . I was immediately taken aback by this suggestion, both in 1) the simplicity and appropriateness of the central idea and 2) the potential misguidedness of the implementation. Yes, a CSS-accessible way to identify the site is a splendid idea. No, the body tag might not be the right place for it, since I think of the body as the document and most sites are composed of several documents; to give each docment the same ID would be, well, odd, like naming all of your sons George . And I (and many others) have recently been known to use an id on the body to identify where the heck I am in a site (which document, perhaps), for purposes of highlighting a portion of the navigation, etc. Perhaps an id on the html tag would work?

This is sort of a warmish topic lately, a handful of the big bloggers have been on about it briefly.

Meanwhile, what about all of those sites that aren’t putting CSS signatures somewhere useful? Ryan Tomayko proposes a solution. In his article, ” Per Site User Stylesheets ,” Ryan outlines a way to insert signatures for sites that don’t have them. At its core, his code munges the host portion of window.location and sets an id on the body tag to match, allowing you to refer to body#slashdot-org or what have you in your user stylesheet. Read his article for the details when you finally get fed up with the default font on Slashdot, for example.

Trouble is, Mr. Tomayko’s technique mercilessly breaks sites that already use an id on the body, since whatever was there is replaced by the results of his script.

But there is an alternative. Set a class on body. The modern browsers all support multiple classes, space-delimited. The critical portion of Mr. Tomayko’s code is as follows:

1
2
3
4

<![CDATA[
    var sig = window.location.host.replace(/./g, '-');
    this.setAttribute('id', sig);
]]>

Changing that to

1
2
3
4
5

<![CDATA[
    var sig = window.location.host.replace(/./g, '-');
    classStr = !!this.className ? this.className + " " + sig : sig;
    this.className = classStr;
]]>

sets a class on body without destroying existing work, allowing you to neatly grab the body tag in your user stylesheet with body.slashdot-org . Problem solved.

I haven’t yet tried an id on html. Anyone?