«
»

Look Ma No Web Developer Toolbar

Sunday, November 22nd, 2009 - 10:57 am - CodeDebugging

“I use the following bit of CSS to help visualize the structure of an XHTML (or HTML) document by putting a colored outline around the border of every element. At each level in the hierarchy the color changes so you can see when “depth” changes.

  * { outline: 2px dotted red }
  * * { outline: 2px dotted green }
  * * * { outline: 2px dotted orange }
  * * * * { outline: 2px dotted blue }
  * * * * * { outline: 1px solid red }
  * * * * * * { outline: 1px solid green }
  * * * * * * * { outline: 1px solid orange }
  * * * * * * * * { outline: 1px solid blue }

I usually keep this block of rules at the top of a stylesheet, commented out with /*…*/, which I remove when I want to see the structure.“ (Chris Page) [A Handy CSS Debugging Snippet] Almost as handy as Web Developer Toolbar Add-on for Firefox. [via: DI]