Bookmarklets to the rescue

As part of my cleanup work over the weekend, I was trying to untangle some Cascading Style Sheet (CSS) problems I was having with my blog. The problem goes like this: any element on your page, like a block of text, can inherit a property, like its color or its font size, from any of several style definitions that surround it. For simple style sheets, this is straightforward. But as the style sheets you use (particularly those you didn’t write) get more complicated it can be hard to deduce why the page doesn’t look right. Was the problem due to the <p> paragraph style or the <div> style or the <span> style or what? I figured there must be some diagnostic tools out there, and with the aid of Google I quickly found just the thing: bookmarklets.

Bookmarklets use CSS and JavaScript magic to instantly change your web page in useful ways. Jesse Ruderman’s amazing ancestor bookmarklet does exactly what I was looking for. Hovering over any element on your page will reveal the inheritance structure. For instance, the text below has the

HTML > BODY > DIV#content > DIV.blog > DIV.blogbody > BLOCKQUOTE

Try it! Click on this link, and then hover over this page somewhere. Believe me, this is marvelous information. Now go back to Jesse’s Bookmarklet page and check out some of the other cool loot, like the one that zaps cheap effects on cheesy web pages. There’s a lot of good stuff here.