CSS Debugging Stylesheet

Design
Tips

February 4, 2004 - 9:48pm

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.

Graphic of what the stylesheet does to a layout

CSS Debug

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.

February 4, 2004 - 10:26pm

Sam said

Too cool. Thanks!

February 5, 2004 - 3:51am

Scott Johnson said

I like how all of the elements are labelled, but overall it’s a bit too pink for my tastes.

February 5, 2004 - 8:41am

kevin said

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)

February 5, 2004 - 9:28am

codepoet said

It’s pink because it’s rgba(255, 0, 0, 0.1) so that stacked DIVs will become more and more red the deeper you go. For the masculinely-challenged you can always make that 0.2 or higher.
I use border because it changes the layout. If I see a five-pixel-thick line on the side then I know I’m five levels deep and can tell from the colors which steps I took to get here. This is designed to help you locate things and see margins and paddings and so on across the site. It will change the layout temporarily to get that to happen because it’s just for debugging.

February 5, 2004 - 4:32pm

chillu said

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)

February 6, 2004 - 4:00am

Mark Eichin said

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?

February 6, 2004 - 9:02am

Woody said

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!

February 6, 2004 - 9:29am

JKP said

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

February 6, 2004 - 2:41pm

Mark bdash Rowe said

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.

February 6, 2004 - 9:25am

kirkconsulting.co.uk said

Trackback from kirkconsulting.co.uk:

Possibly the best thing I’ve seen in months – a plug-in CSS debugger in the form of a Style-sheet….

February 8, 2004 - 6:58am

ETC. Indulging my inner geek said

Trackback from ETC. Indulging my inner geek:

codepoetry :: CSS Debugging Stylesheet – very nice CSS debugging bookmarklet! Works beautifully in Gecko/KHTML browsers (not tested in IE).......

February 8, 2004 - 11:38am

UFies.org said

Trackback from UFies.org:

Cool, codepoetry has a CSS Debugging Stylesheet that looks like it’ll be handy when I finally redesign things. Any day…...

February 15, 2004 - 12:15am

ibry.net said

Trackback from ibry.net:

Codepoetry recently posted what I think is the best CSS debugging tool yet. Imagine checking your page layout in a browser, noticing something not lining up correctly, and, with one click, revealing the structure, divs, and classes of the page…...

February 17, 2004 - 5:46am

Bryan Bell said

Trackback from Bryan Bell: