CSS Debugging Bookmarklets

I wrote two CSS debugging bookmarklets to ease the pain of XHTML/CSS development under Internet Explorer. They mimic two commonly used features in the Web Developer extension for Firefox. The first outlines block-level elements, and the second displays ID and class information. Although that such functionality already exists in Web Developer and other bookmarklets, I couldn't find anything that is compatible with Internet Explorer and works offline (What I found are bookmarklets rely on including remote stylesheets).

To test a bookmarklet, simply click its link. To use it, drag and drop the link to your Links/Bookmarks toolbar, and press the resulting button when you want to activate the associated functionality. These bookmarklets are tested with Firefox 1.5, Internet Explorer 6.0, and Opera 8.5. I haven't had the chance yet to test with KHTML/Safari, but I think they should work because the code is standards complaint.

Anyone who's worked with XHTML/CSS for a while knows that Internet Explorer support for standards is lacking to say the least. It has many obscure bugs and compatibility issues. Firefox is my platform of choice for web development because of its compliance with standards and the plethora of development and debugging tools and extensions available (most notably Web Developer and FireBug). Once coding is finished under Firefox, I validate the code and test with other browsers (IE, KHTML/Safari, and Opera). Most of the time the code works on Opera and KHTML without any issues; however, IE often produces problems, and while working around them, I used to wish I had Web Developer's features for IE. Now I have these bookmarklets. They took me like 5 minutes to write and test under Firefox, but IE silently failed to produce the desired results until I did another hour of work. I adopted Web Developer's styles for outlined elements and ID/class information for consistency. And now I'm sharing them here now hoping that others find them useful as well.