Show computed styles bookmarklet

Simon Willison, annoying bastard that he is, throws down the gauntlet:

This is certainly a problem with CSS layouts - their maintainability can suffer due to the separation of the presentation from the layout (itself the greatest advantage that CSS provides). Tools such as the ViewStyles, ancestors and ShowDivs bookmarklets certainly make this easier but to my knowledge no one has written a bookmarklet that shows the inherited styles for the currently selected element - at least not yet. Pixy’s List Computed Styles comes close, but shows styles for every element in the document all in one big window.

I am busy, dude!

Nonetheless, I have taken time away from banging my head against plugin handling in Vellum (and watching The Matrix again, I admit), to sort out:

Show computed styles for element

This should, when clicked, pop up a new window and then show you the full list of styles (there are a lot!) for an element as you mouse over it. It builds on my work with the Q element (and computed style) and the SquareFree ancestors bookmarklet. It could do with prettying up a bit. It would also be very good to not show things which are set to the default value (i.e., have no style overrides and are being displayed as the browser does it natively) but I don’t know how to know what the browser default is. Someone else can make this a nice usable bookmarklet, but the structure is here.

Tested in Phoenix 0.5 on Linux only; it should work with IE, but no guarantees.


I'm currently available for hire, to help you plan, architect, and build new systems, and for technical writing and articles. You can take a look at some projects I've worked on and some of my writing. If you'd like to talk about your upcoming project, do get in touch.

More in the discussion (powered by webmentions)

  • (no mentions, yet.)