On Jan 22, 2005 I wrote CSS signatures on every site, on the subject of Web and Musings.

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.

Senji

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

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

sil

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

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

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

Jeremy Dunck

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

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

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 www.kryogenix.org both end up with the same css signature.

sil

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

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

...And sorry to have forgotten your involvement with the CSS extension idea. :(

sil

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

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

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 www.kryogenix.org. I’d love to do that with the GM user script as well, but I personally can (and do) know that 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

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

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

Marko

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

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

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

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

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

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

cal

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

@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

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

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

Pulso

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

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

#www-site-com-8080

It seems to be working as expected.

FreeBee

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

FreeBee: The Moz site has the detail.

splib

hm sounds a bit like url match in proxo. but i’m not sure if proxo filters css files. i think i’ll try …
[Patterns]
Name = “FixInputQ(Goo)(Splib23Aug05”
Active = TRUE
Multi = TRUE
URL = “*.google*”
Bounds = ””
Limit = 512
Match = ””
Replace = ””

splib-try-PreTag

[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

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

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

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();

}

})();