A Handy CSS Debugging Snippet
From A Handy CSS Debugging Snippet:
* { 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 }
This code, if placed in your stylesheet, outlines every element on the page with colored boxes. I like this because it’s simple, and I learned something from it. I had no idea that you could use an asterisk for a css selector. Then, the idea of stringing them together to represent the elements that are most deeply nested with different colored outlines. Pretty slick!
I will probably still use the many functions in the Outline menu of the Web Developer Extension for Firefox, and the Internet Explorer Developer Toolbar, for most of my everyday outlining-for-debugging needs. There are also bookmarklets out there to do this type of thing. But, this snippet deserves a spot in my toolbox, because it seems like it could could come in handy someday.
subscribe to entries feed
Leave a Reply