CSS signatures on every site | as days pass by

By sil General musings

CSS signatures on every site

Remember the CSS signature idea? That was a good idea, that. The theory is: everyone puts a unique identifier, like the domain name, as the id on the body tag of their HTML. So, here, it would be

<body id="www-kryogenix.org">

(replace dots with dashes) Then people can adjust my CSS to their own preference using user stylesheets and an appropriate CSS selector. Don’t like my link colours? Change ‘em! Just say:

#www-kryogenix-org a { color: red; }

in your user stylesheet and then this site will have red links. Neat idea. However, unsurprisingly, it does rather rely on the whole world picking up the idea, and it did, unsurprisingly, not happen. Now, of course, in our Brave New World, and with this being the Year Of The DOM and all, we have GreaseMonkey to run scripts for us which can be attached to certain sites. These should be doing DOM manipulation things, and indeed they can do. Some of them aren’t, though: the list of GreaseMonkey User Scripts has an awful lot that say things like “remove sidebar from CNN” and “remove this offensive thing from that site” and so on. This is what CSS signatures were for…but no-one uses them. So, combine the two. Have a GreaseMonkey script that adds a CSS signature to every site you visit, and then adjust things in your user stylesheet. That oughta work.

34 thoughts on “CSS signatures on every site”

Senji says:

January 1, 2000 at 12:00 am

That’s a remarkably good idea. I must remember to look at it when I get to work (don’t have Firefox at home yet).

Hmm, and your comments preview thing is working better than before…
Phil Wilson says:

January 1, 2000 at 12:00 am

If you hadn’t seen it before URIid has been out for more than six months and effectively does the same thing.
sil says:

January 1, 2000 at 12:00 am

Senji: that’d be because I fixed it

Phil: ah, didn’t know about URIid. Of course, a GreaseMonkey user script is about forty times easier to write than a whole extension, which is why GreaseMonkey is such a good thing…
jiu says:

January 1, 2000 at 12:00 am

Could you make it assign the url of http://kryogenix.org to www-kryogenix-org instead of just kryogenix-org like syntax too?
Of course the subdomain should not be handled like this.
sil says:

January 1, 2000 at 12:00 am

jiu: not sure I understand the question? Could you explain in a bit more detail what you want?
Jeremy Dunck says:

January 1, 2000 at 12:00 am

Stuart, thanks for the contribution to the growing list of useful user scripts. I agree that leaving CSS-possible things up to CSS is a Good Thing.

I will note that installing a “Fix CNN” user script is decidedly easier for the general user than writing a custom user CSS file, though.

Simon and I had talked about making an extension explicitly for easily sharing user CSS for popular sites; Greasemonkey is basically the same thought for JS.
I don’t know why the idea never occurred to me, but I’m very happy for it.
sil says:

January 1, 2000 at 12:00 am

Jeremy: yep. I remember Simon’s original post on sharing CSS fixes for websites (and was part of it iirc, as well ) I’ve got a few more thoughts on stuff to do with GM, just as soon as I get five minutes to write them down!
Breyten says:

January 1, 2000 at 12:00 am

What jiu means is that for this to work effectively, the URLs should be converted to a canonical form first, so that kryogenix.org and http://www.kryogenix.org both end up with the same css signature.
sil says:

January 1, 2000 at 12:00 am

Breyten, jiu: I agree. However, the script can’t assume that “www.example.org” and “example.org” are the same thing, and therefore can’t make assumptions like that…
Jeremy Dunck says:

January 1, 2000 at 12:00 am

Yeah, what it’s doing now seems pretty close to “canonical“.

I would suggest that you .toLowerCase the location, since DNS is case-insensitive while IDs are not.
Jeremy Dunck says:

January 1, 2000 at 12:00 am

…And sorry to have forgotten your involvement with the CSS extension idea.
sil says:

January 1, 2000 at 12:00 am

Jeremy: good call on the smashing case: script now updated. As regards forgetting involvement, the reason the web is there and we all try hard to not break permalinks is that it’s a resource which exists outside your memory; you’re not supposed to memorise it all
Jeremy Dunck says:

January 1, 2000 at 12:00 am

Aha! I think I just got jiu’s comment.

You’re manually including id=“www-kryogenix-org” on these pages, even though I’m requesting kryogenix.org.

Was that intentional?
sil says:

January 1, 2000 at 12:00 am

It was indeed intentional for my explicitly set in-the-HTML CSS signature; people who want to customise my site in their user stylesheets should not have to care whether they go to kryogenix.org or http://www.kryogenix.org. I’d love to do that with the GM user script as well, but I personally can (and do) know that http://www.kryogenix.org and kryogenix.org are the same thing. A script, being run on an arbitrary site, cannot, so it has to just go by whatever’s in location.host. Unfortunate, but not (I don’t think) avoidable.
Senji says:

January 1, 2000 at 12:00 am

sil—fixed it> I’ve just noticed that in this web browser (didn’t notice it in my Firefox 1PR at work) the text box shrinks when I start typing into it…

I’m using Mozilla 1.6 here.
sil says:

January 1, 2000 at 12:00 am

Senji: really? Odd. It’s not supposed to, obviously. Doesn’t happen in FF1.0…
Marko says:

January 1, 2000 at 12:00 am

I noticed that there was an error message coming up frequently in my Javascript console and tracked it down to the fact that the location.host object doesn’t exist on blank pages or on about: pages (like about:config or about:mozilla).

To silence the Javascript error I changed the if line to be

@if (document.body && !location.href.match(/^about/) && document.body.id == ‘‘)@

For whatever reason, I could not figure out how to test for the existence of location.host without triggering the error. I’d tried && location.host and && location.host != null
sil says:

January 1, 2000 at 12:00 am

You’re not wrong, Marko. location.host exists (you can see it in “for (var p in location) print(p)“, for example) but accessing it, even with something like “typeof location.host” throws the error, so I suspect that your solution is the best one!
frosty says:

January 1, 2000 at 12:00 am

Hmmm, this seems like a really cool idea, but I see one potential problem.

I often use body IDs for specific styling by page without having to send the client a new stylesheet. For example, highlighting the menu selection for the current page with something like
#SomePage a.Menu_SomePage {color: blue;}
A lot of other people use the same technique… it could of course be replaced by adding a div wrapper, but IDing the body is much more common.
This would presumably break that, unless of course you also go through all the CSS and update the relevant ID. Am I missing something?
sil says:

January 1, 2000 at 12:00 am

frosty: Yes. That’s why the script checks that id is blank before setting it. It does mean that you can’t use this to per-site-style a site in your user stylesheet if that site already uses body IDs, but I can’t think of a way around that
barton says:

January 1, 2000 at 12:00 am

To avoid the ID colision how about using a class if there is a colision. The class can have multiple arguments like class=“big blue red“. Then if there is already a class=“abc-com” just don’t set it at all, otherwise add the name to the class of body. Wouldn’t that work?
Hunox says:

January 1, 2000 at 12:00 am

This is great. I already have several sites in mind that I could change!
cal says:

January 1, 2000 at 12:00 am

On the latest firefox v1.0.4, this extension doesn’t seem to work. The similar URIid extension doesn’t even work anymore. Is there a fix available? Thanks.
Pulso says:

January 1, 2000 at 12:00 am

@cal: It works for me. Remember that every element should be prefixed with the site name, like this:

#www-site-com td,

#www-site-com p,

#www-site-com input { font-size: 11px !important; }

Instead of this:

#www-site-com td, p, input { font-size: 11px !important; }

As obvious as it may seem, it took quite a while to figure this out
Pulso says:

January 1, 2000 at 12:00 am

Ops, forgot the reason why I came here today…

What about sites that listen on a different port (www.site.com:port)? What do I need to change in the .JS file for it to work? I know nothing about JS, pattern matching…
sil says:

January 1, 2000 at 12:00 am

Pulso: er, dunno. Er. I’ll look at that if I get a chance.
Pulso says:

January 1, 2000 at 12:00 am

sil: Found it inside URIid’s .xul file:

(/[.:]+/g, ‘-‘)

#www-site-com-8080

It seems to be working as expected.
FreeBee says:

January 1, 2000 at 12:00 am

Is my Firefox1.0.4 installation the only version that did not create the UserContent.css file? Why does nobody mention where to create that file in case it doesn’t exist? This seems to me like a CRUCIAL piece of info if you create an extension/script involving that file!
sil says:

January 1, 2000 at 12:00 am

FreeBee: The Moz site has the detail.
splib says:

January 1, 2000 at 12:00 am

hm sounds a bit like url match in proxo. but i’m not sure if proxo filters css files. i think i’ll try …

splib-try-PreTag says:

January 1, 2000 at 12:00 am

[Patterns]
Name = "FixInputQ(Goo)(Splib23Aug05"
Active = TRUE
Multi = TRUE
URL = "*.google*"
Bounds = "<input *>"
Limit = 512
Match = "<input *1 name=q *2 * value="4" >"
Replace = "<input 1 name=q 2 size=60 maxlength=2048 value="4">"

splib_rightFilterForCssNow says:

January 1, 2000 at 12:00 am

got the posting to work, but i see i copied the wrong filter. here’s the style filter, pretty obvious effect on google page:

[Patterns]
Name = "font-family:arial,sans-serif (Goo)(Splib24Aug05Experiment"
Active = TRUE
Multi = TRUE
URL = "*.google*"
Bounds = "<style> *style>"
Limit = 1024
Match = "*1 font-family:*} (*2)"
Replace = "1 font-family: Impact;}2"

splib_rightFilterForCssNow says:

January 1, 2000 at 12:00 am

got the posting to work, but i see i copied the wrong filter. here’s the style filter, pretty obvious effect on google page:

[Patterns]
Name = "font-family:arial,sans-serif (Goo)(Splib24Aug05Experiment"
Active = TRUE
Multi = TRUE
URL = "*.google*"
Bounds = "<style> *style>"
Limit = 1024
Match = "*1 font-family:*} (*2)"
Replace = "1 font-family: Impact;}2"

Pat Erley says:

December 2, 2005 at 7:39 pm

This adds ip- to the id so that you can use this on local and/or ip only hosts.

Ids can’t start with a number (in mozilla / firefox), so this solves that.

(function() {
var ValidChars = “0123456789″;
if (document.body && document.body.id == ”)
if (ValidChars.indexOf(location.host.charAt(0)) > -1)
{
document.body.id = ‘ip-’ + location.host.replace(/./g,’-').toLowerCase();
} else {
document.body.id = location.host.replace(/./g,’-').toLowerCase();
}
})();

Leave a Reply Cancel reply