Show applicable styles

This is far and away and without a shadow of doubt the most complex bookmarklet I have ever written. It’s in response to Simon’s challenge and then his further rebuttal that my previous attempt didn’t quite do what he was looking for. Jesse at SquareFree also came up with an implementation, but then went on to say, “Simon actually wanted a bookmarklet that would show the style rules that apply to an element, like the DOM Inspector does, but I don’t think that can be done in a bookmarklet”.

Red rag to a bull, that.

So, the International House of Kryogenix presents:

Show applicable styles

What this should do is (eventually) pop up a separate window and then display, in that window, all the styles in your stylesheets that affect the element you’re currently hovering over.

This will almost certainly not work in your browser. Whatever browser you’ve got. It works for me in the latest Phoenix (er, Firebird) nightly build. I’d be profoundly shocked if it worked in IE, and it will just not work in Opera or Safari at all, I imagine.

Big, big caveat 1: it does not work for sites which have a stylesheet which @imports a sheet (to hide styles from NN4). As far as I can tell, @imported stylesheets don’t appear in the document.styleSheets array. Not really a lot I can do about this, I don’t think. This means that Simon’s site won’t work, that diveintomark won’t work, ad nauseam.

Caveat 2: if you find it doesn’t pop up the extra window (and throw a Javascript error about newwin) then you might want to check that you’re not blocking popup windows, and unblock the site you’re looking at. Took me half an hour to work that out.

Anyway, if it works for you and you find it useful, good stuff. I might write up something on how it works, if I get a chance.

More in the discussion (powered by webmentions)

  • (no mentions, yet.)