Making Your Site Modifiable

  My design brings tears?
      With a clever style sheet trick
    I let you change it.

The Problem

Current Web browsers allow people to use their own custom style sheet when viewing Web sites. While this is a good first step toward increasing usability, it's got one drawback: the changes you make to fix a problem with one site are applied to every site on the Web. A change that makes your favorite site more readable could make other sites harder to read. By trying to fix one site, you've broken another.

What we need is a way to modify styles on a per-site basis.

The Solution

The solution is for Webmasters to make one small change to their sites. (We'll assume you have a site yourself; if not, there's not much you can do except persuade Webmasters to make this change.) All that's required is the addition of an id="yoursite" attribute to the body element of each of your site's pages. Then visitors can define their own styles for your site by combining CSS's id selectors with descendent selectors:

In mystyles.css:

  /*-----------------------------*/
  /*   default heading 1 style   */
  /*-----------------------------*/
  h1 {
    font-family: Helvetica, sans-serif;
  }

  /*-------------------------------------------*/
  /*   a heading 1 style just for your site    */
  /*-------------------------------------------*/
  #yoursite h1 {
    font-family: Impact, sans-serif;
  }

  /*--------------------------------------------------*/
  /*   a different heading 1 style for another site   */
  /*--------------------------------------------------*/
  #anothersite h1 {
    font-family: Univers, sans-serif;
  }

With this scheme, you can change how almost anything appears on a particular site, without ruining how the rest of the Web looks. Don't like the typeface the site uses for paragraphs? Change it! Does the background color make the text hard to read? Make it black text on a white background. Hate how links change color when the mouse travels over them? Restore their usability. Fix the site's mistakes.

Note that we apply the unique ID to the body element rather than the html element. That's because the html element doesn't have an id attribute.

Extending this Technique to Customizing Individual Pages

We can extend this technique to allow customization of individual pages on your site. This requires another modification to the target page: enclosing the page's content in a div element with a site-unique id attribute. For example:

<html>
  <head>...</head>
  <body id="site-id">
  <div id="unique-page-id">
  ...page content...
  </div>
  </body>
</html>

To specify just this page, add a rule to your style sheet with a selector that begins #site-id #unique-page-id.

A Thorny Problem: ID Collisions

To make this scheme effective everywhere, each site's id attribute should be unique. The simplest way to do this is to use the one aspect of every Web site guaranteed to be unique: its URL. Unfortunately, URL syntax includes characters that are forbidden or ambiguous in HTML & CSS, so we can't simply assign the site's location to the id attribute. Since we want to avoid collisions throughout the entire namespace of the Web, a universal URL mangling scheme should be developed. This is a real challenge: the period and forward slash can't be used, along with all non-alphanumeric characters except the hyphen and underscore. As a start, though, I'd recommend replacing periods with underscores and forward slashes with hyphens (e.g., ID="www-rdrop-com-half").

Another solution is to use a hash of the site's URL. For example, the MD5 hash of http://www.rdrop.com/~half/ is 259841b52e855f025a090ac2da9efc9a. While using hashes prevents collisions, it does so at the expense of usability. Do you remember which site f169dc904d3c6d9a423f25d6f7358989 is?

A hybrid scheme combining a mnemonic and a hash is almost ideal, but the identifiers would be too long. We're faced with a case of "unique, memorable, short: choose two".

A Solution in Search of a Problem?

You might wonder why anyone would want to do this. After all, you've spent time perfecting your site's look; why would you encourage someone else to change it?

There are two answers to this question.

It benefits those who rely on CSS to make pages accessible. Perhaps their modifications will make your site easier to read, or assist text-to-speech conversion. They might improve your site in ways you haven't even considered.
Only those who are really interested in your site will use this technique. In other words, you'll be offering flexibility to people who already find your site worthwhile. Allowing visitors to tweak your site indicates that you want visitors to use your site to the best of their ability. It's a friendly gesture with minimal cost.

You could even ask visitors for site design suggestions based on their modifications to your site's style. In this case, you're potentially enlisting the entire online community to help improve your site. Better still, the effort required discourages casual twiddling; any suggestions you get will come from people who really care about your site.

Really, there's nothing to lose. People already view your site in ways you have never imagined. Why not allow those who really like your site to view it the way they want to?

I believe in this technique enough that I've incorporated it into this site: the id is www-rdrop-com-half. If you use this tip and discover a way to improve this site, please let me know.

This page was inspired by a discussion of WikiStyle.

Update

Eric Meyer, who independently came up with this idea, has a nice name for it: a CSS signature. I liked it so much that I made one of those trendy-but-hard-to-read 80×15 icons popular on blogs.

Your site's signature should be present in the ALT text (e.g., alt="CSS signature: www-rdrop-com-half").

A handful of sites use CSS signatures. I take some small pride in the fact that this site may have been the first to do so.

2004-02-04

Last updated 6 February 2004
http://www.rdrop.com/~half/Creations/Writings/TechNotes/css.tip.2.html
All contents ©2002 Mark L. Irons

Previous: CSS Tip #1: A Navigation Bar that Degrades Gracefully ··· Next: Evolution of an Antispam Strategy

MLI Home → Writings → Tech Notes → CSS Tip #2: Making Your Site Modifiable