Made it last night when the urge hit to redesign the site. I love it. Tell me what you think. It works best in Safari where you can specify it as a custom stylesheet, but you can also import it from another stylesheet, just import it after all the stuff you put in so it can override it.
Update: There’s now a nifty 0.appendChild(newSS);})();”>bookmarklet that will add the sheet to the current window only. Works in KHTML and Gecko. I refuse to test in IE, as usual. I’m also working on an updated sheet with colors a bit easier on the eyes. I hadn’t expected it to be so popular. 
Later tonight, I expect.
New version is over here.
Bookmark/Search this post with:
Too cool. Thanks!
I like how all of the elements are labelled, but overall it’s a bit too pink for my tastes.
border actually changes the layout. Safari v1.2 provide support for the outline property, which is similar but doesn’t change the layout. You may want to try that (although, of course, overlapping outlines will obscure each other)
Nice one!
Theres also a Firebird-Extension which gives you the same functionality without the need to change your code:
http://texturizer.net/firebird/extensions/#webdeveloper
Just activate “Misc->View ID&Class Details” and “Outline->Outline Block Level Elements”.
The downside: Its not browser-independent (as your CSS-solution)
Mmmm, Safari’s default stylesheet feature (of course, in retrospect) applies to all open windows. Is there a clever trick (maybe a bookmarklet?) to apply it to a single one?
Perfect! Just what I need as I play with my site’s design. (If you look at my site — I know, I have much to learn!) Thanks, codepoet!
I have to agree about the pink – but then I guess it’s easy to change to a blue or something easier on the eye.
In reply to Mark Eichin – what I have done is included the sheet in header template file, and from there it is easy to activate and deactivate on demand…simply uncomment the relevant line. Pretty much any site will have a header template or include of some sort, so I should think that this is the best place to place it.
The safari feature can then be used for poking around the CSS on other sites for educational purposes.
Absouletly top notch though
Woah, very nice stuff. I can see this coming in very handy when developing new websites. This has earned a permanent place on Safari’s Bookmark bar.
Trackback from kirkconsulting.co.uk:
Trackback from ETC. Indulging my inner geek:
Trackback from UFies.org:
Trackback from ibry.net:
Trackback from Bryan Bell:
Trackback from warwick@weblogger:
Trackback from CRISTIAN VIDMAR: My Public Weblog:
Trackback from house of warwick: