I heard about this an intriguing HTML Altimeter bookmarklet via Asa (or “Topographic View”, as the author calls it). It’s a bit hard to describe, but it essentially reassigns the CSS background for each element on the current page to represent the number of nested elements at that point.
Level zero starts at black and each additional nested element gets closer to white (with 16 shades in total). To make use of the bookmarklet, visit the author’s page and drag the “Topographic view” link to your Personal Toolbar. Then, just click that link to see the effect applied to the current page.
As you might expect, well formed CSS-based sites barely get out of black, but table-based layouts can easily approach pink (the color designating nesting past 16). All the same, though this bookmarklet is good for an easy laugh at the expense of poorly built sites, I’m not sure if it has any practical development applications :-/.
Actually, the bookmarklet was designed to provide a better solution for aligning elements. Most people turn on element borders, but this changes the size of the elements.
The trick was to find a way to vary the background colors in a way that distinguished each item–and the degree of nesting provided a useful variable. The fact that it created a height-map of the page was just a nice side-effect.
Joseph: Aha! That makes much more sense — thanks for clarifying that :).
I sent the altimeter link to a friend and he sent this in response:
http://chrispederick.myacen.com/work/firefox/webdeveloper/
(much cooler he says)