Script enhanced user style sheets

Hi,

  Site specific user style sheets are probably one of the most commonly
requested features for CSS. I wanted to link to some documents that
explain how to do this in current browsers, but I have been unable to
find one. Hmm, now that I think about it, suggestions like the <html
id='www-example-org'> convention probably indicate that it is not
obvious that you can do this today.

I am in particular annoyed by <http://groups.google.com>, individual
messages are inside <pre> elements and pre renders using my favourite
<pre> font-family, but links inside <pre> use Arial which is rather
ugly. One defense strategy for Internet Explorer/Windows is a user style
sheet containing something like

  html {
    background-image: url(
      javascript:
        if (document.location.host == "groups.google.com")

document.createStyleSheet("file:///c:/.../groups.google.com.css")
    ) !important
  }

(this would even validate if the url is probably escaped, spaces
replaced by %20, etc.) Where groups.google.com.css contains e.g.

  pre a:link,
  pre a:visited
  { 
    font-family: "Courier New", monospace;
  }

This would load the groups.google.com.css style sheet for all pages on
groups.google.com. The downside of this approach is that it breaks other
pages that have

  html { background-image: ... }

but lack

  body { background-image: ... }

since my user style rule would override it. A workaround would be to use
a more specific selector such as

  form span#hf
  {
    ...
  }

apparently all relevant pages on groups.google.com contain an empty
<span id=hf> inside a <form> and it is rather unlikely that there is a
document on the web where it would be a bad thing to override it.

A slightly different approach would be to rely on proprietary
extensions, you could for example use

  pre a:link, pre a:visited
  {
    zoom: expression(
      document.location.host == "groups.google.com" &&
        this.currentStyle.fontFamily != "Courier New" ?
          this.style.fontFamily = "Courier New" : ""
    )
  }

Using 'font-family' directly here would be more convenient, but it seems
that expression() cannot be combined with !important, hence I've used a
property groups.google.com does not use.

These examples are not very sophisticated, the point here is just that
browsers typically provide a number of ways to execute scripts from
within style sheets and this can easily be used for better user style
sheets.

Received on Tuesday, 23 March 2004 05:44:51 UTC