advanced code snippet search

Handy CSS Debug Snippet

Published in: CSS 

URL: http://homepage.mac.com/chrispage/iblog/C42511381/E20060806095030/index.html

Great little debuging snippet found while browsing. The code adds different coloured borders to the assets depending on its level. Leave commented out if not needed.

Embed | Plain TextExpand 
  1. * { outline: 2px dotted red }
  2. * * { outline: 2px dotted green }
  3. * * * { outline: 2px dotted orange }
  4. * * * * { outline: 2px dotted blue }
  5. * * * * * { outline: 1px solid red }
  6. * * * * * * { outline: 1px solid green }
  7. * * * * * * * { outline: 1px solid orange }
  8. * * * * * * * * { outline: 1px solid blue }

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: tylerhall on August 7, 2006

That's so clever - never would have thought of that. I love it.

Posted By: Kraeved on April 22, 2009

1man, thank you.

Posted By: dougunderscorenelson on April 28, 2009

Very nice! I threw some "important"s onto mine to make sure they show up.

Posted By: joaojoaquim on May 6, 2009

5* thnks

Posted By: ramnath on June 26, 2009

this is very useful... thanks for the tip!

Posted By: ecwpa on July 4, 2009

awesome! thanks

Posted By: frujo on July 21, 2009

That's amazingly simple! The same great as simple!

Posted By: qweqwe on July 22, 2009

Too much noise... Firefox + FireBug much better

Posted By: qweqwe on July 22, 2009

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

Posted By: vagrantradio on December 18, 2009

This will throw off your layout and make it display out of whack, just use Firebug.

Posted By: 1man on January 10, 2010

Uses outline not border so won't effect the layout. And yes you can use firebug to do it, among many other tools.

You need to login to post a comment.