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.
None
Nice work. I’ve been planning writing something like that for some time but never gotten to it…
8 hours later
I also wrote a computed-styles bookmarklet today. Mine is at http://www.squarefree.com/bookmarklets/webdevel.html#computed_styles .
8 hours later
Sweet :) It’s not quite what I meant though – I’m after something that shows the actual style rules (as written in the stylesheets) that apply to the current element, preferably along with the style sheet that they are written in. Show Computed Styles certainly looks very useful though.
8 hours later
Ah, yes, quite possibly. Phoenix here doesn’t resize windows, so I guessed…
8 hours later
Most of the styles are wider than 150px, so I found including ‘resizable’ in the open parameters to be helpful.
8 hours later