Skip to content

Instantly share code, notes, and snippets.

@xavierartot

xavierartot/gist:9935149

Created April 2, 2014 14:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xavierartot/9935149 to your computer and use it in GitHub Desktop.
Save xavierartot/9935149 to your computer and use it in GitHub Desktop.
Download ZIP
Work with Layout
Raw
gistfile1.txt
The problem is that unless the element on the page has a solid background or it is a picture, you do not see how does it fit into the layout, e.g. most of the text nodes, pictures with transparency, etc.
It is meant to be used when you are working with layout.
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies.
More detail:
http://www.quora.com/Web-Development/What-are-the-most-interesting-HTML-JS-DOM-CSS-hacks-that-most-web-developers-dont-know-about/answer/Gajus-Kuizinas?utm_content=buffera1660&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment