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 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.
And how did you think my ViewStyles bookmarklet got all @imported stylesheets? Of course they are in the styleSheets collection – as @import rules in the stylesheet they belong to. In ie you use [object styleSheet].imports, and in mozilla you will have to do a loop through the rules in the stylesheet, like this:var k=0,mfor(;(k
Posted by Liorean on April 22nd, 2003.
The bookmarklet (show applicable styles) does work in IE 6. It works for the page it is on, but because you load the source from a file, it causes security errors when used on other pages. This is as it should be.
There ought to be a way of working around that problem…
Posted by Daniel LaLiberte on February 5th, 2004.
Has anyone ever come across a method to update old stylesheets to automatically (ie run against the site) delete any classes out of the stylesheet that are no longer being used????
Posted by mike on January 18th, 2005.
Clap, clap, clap. This is a snazzy piece of work. I like how it responds to mouseover. I’ve been trying to work out how to do this in Emacs(I know, I know…, but still.)
BTW, I’m making a page to list all the bookmarklets available on the web, at http://en.wikipedia.org/wiki/User:JesseW/BookmarkletsUniversal
, and I would like to include the code for your bookmarklets there, if you are willing. Please let me know.
Posted by Jesse Weinstein on May 2nd, 2005.