Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Per-site user stylesheets

I’ve been thinking a lot about per-site user stylsheets recently. Eric Meyer’s CSS signatures are great for sites that support them (as this site does), but the sites that really need altering are highly unlikely to carry them. I posted a comment to that effect on photomatt.net a while ago, and thankfully it was spotted by Ryan Tomayko who has published a simple brilliant hack that uses XBL in Mozilla’s user stylesheet to execute JavaScript which adds a CSS signature to every site you visit.

I suggest making a couple of minor modifications to Ryan’s code. Firstly, it over-writes any existing body tag IDs which could cause problems on the few sites that use a body ID as a hook for per-page styling. I would recommend not over-writing the ID if it already exists, or adding an additional class to the body element instead. More importantly, Ryan’s technique couples your browser’s user stylesheet to an XBL file hosted on his server. Not only is this a performance menace (for both his server and potentially your browser) but it opens a cross-site scripting vulnerability in that you are executing code from outside your control every time you visit a web page. I recommend hosting the XBL file locally instead, although the best solution would be to upgrade Ryan’s hack to a fully self-contained FireFox extension.

Quibbles aside, it’s a brilliant workaround. Be sure to check out the comment from michael on photomatt.net as well.

Posted 15th July 2004 at 12:57 am

This is Per-site user stylesheets by Simon Willison, posted on 15th July 2004.

View blog reactions

Next: News site registration

Previous: Instant authentication against an existing web application

14 comments

  1. That's an awesome hack. So cool in fact, I think it should be part of the stock Moz/Fox browser IMHO.

    Chris - 15th July 2004 02:51 - #

  2. So how soon will we see this extension?

    alanjstr - 15th July 2004 03:31 - #

  3. Is the URIid extension not pretty much the same thing?

    Peter J. - 15th July 2004 04:18 - #

  4. A solution to the body id problem could be to use the html element for the site-id; too bad that either Mozilla or I have some problems with -moz-binding in said element - at least it did not work in my quick test :)

    b.gr - 15th July 2004 04:26 - #

  5. Ok, so I have Firefox. Where is the user stylesheet? Or where do I place one? Is it automatically called for every site, or must I manually call it (which would be a pain, might as well use a marklet)? etc... How about a mini tutorial?

    stylo~ - 15th July 2004 04:33 - #

  6. I'm not sure if Firefox has a built-in feature - I can't find it - but if you have the Web Developer Extension installed, you can select CSS | Add User Style Sheet from its toolbar.

    Michael Moncur - 15th July 2004 06:03 - #

  7. Oh, here's how to install user styles in Firefox without an extension. Basically you create a file called userContent.css and put it in the chrome subdirectory under your profile.

    Michael Moncur - 15th July 2004 06:07 - #

  8. An IE/Opera hack allows a similar thing; they support JavaScript in CSS background image declarations (probably a bug, but a useful one). I haven't tried this personally (at work right now :), but you may be able to add something like this to your user CSS:

    body { background-image: url(javascript:do_script_stuff_here) }

    More info here. Someone let me know if it works :). I imagine you could go about assigning IDs to the body tag quite easily via location.hostname.replace(/\./g, '-') or similar.

    Angus - 15th July 2004 06:12 - #

  9. I've been playing with the the URIid extension noted above. Doesn't seem to load all the time for me. (Also adding to body class for some reason.) But when it does...! Pretty cool to be able to redesign a dingy bbs that tires your eyes! Hopefully URIid can be perfected.

    stylo~ - 15th July 2004 11:02 - #

  10. This is the bug in Mozilla, which would make per-site user stylesheets possible: http://bugzilla.mozilla.org/show_bug.cgi?id=238099

    Martijn - 15th July 2004 11:32 - #

  11. URIid adds to the body class at all times to allow you to have the same userstyles applied to say different parts of slashdot.org.

    It also adds to the classes on the body if the id is already set.

    In the case of http://simon.incutio.com/ the body tag already has an id attribute, so URIid adds [to the] classes e.g.

    uriid-simon-incutio-com uriid-incutio-com uriid-com

    allowing styles for all subdomains of incutio.com, or in fact styles for all '.com's

    Chris Neale - 15th July 2004 16:25 - #

  12. Chris, in the case where there is no body ID already, why does a subdomain mean that you need a class added as well as an ID? Also any idea why it often doesn't work (maybe mostly when first loading a site, not sure yet)?

    stylo~ - 16th July 2004 08:57 - #

  13. Am I allowed to pimp my own posting about how I do this using URIid and ChromEdit from back in April?

    Awesome per site CSS

    great. :)

    Phil Wilson - 16th July 2004 11:14 - #

  14. URIid source file.

    Classes added regardless, ID added if one doesn't exist already.

    Possible Future Enhancements
    • ID/Classes added before page finishes rendering - suitable listener needed.
    • An additional class based on the entire URL.

    Chris Neale - 19th July 2004 11:41 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2004/07/15/persite

A django site