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:
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
@imports a sheet (to hide styles from NN4). As far as I can
tell, @imported stylesheets don’t appear in the
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
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.