There is one CSS snippet that I have been copy-pasting for 5 years:
* { 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); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }
^ This is one of my favourite inventions.
Update 2020 October. I have since adopted a bit more elaborate snippet:
* { outline: 1px solid rgba(255,0,0,.2); :hover { outline: 1px solid rgba(255,0,0,0.6); } }
* * { outline: 1px solid rgba(0,255,0,.2); :hover { outline: 1px solid rgba(0,255,0,0.6); } }
* * * { outline: 1px solid rgba(0,0,255,.2); :hover { outline: 1px solid rgba(0,0,255,0.6); } }
* * * * { outline: 1px solid rgba(255,0,255,.2); :hover { outline: 1px solid rgba(255,0,0,0.6); } }
* * * * * { outline: 1px solid rgba(0,255,255,.2); :hover { outline: 1px solid rgba(0,255,0,0.6); } }
* * * * * * { outline: 1px solid rgba(255,255,0,.2); :hover { outline: 1px solid rgba(0,0,255,0.6); } }
* * * * * * * { outline: 1px solid rgba(255,0,0,.2); :hover { outline: 1px solid rgba(255,0,0,0.6); } }
* * * * * * * * { outline: 1px solid rgba(0,255,0,.2); :hover { outline: 1px solid rgba(0,255,0,0.6); } }
* * * * * * * * * { outline: 1px solid rgba(0,0,255,.2); :hover { outline: 1px solid rgba(0,0,255,0.6); } }
I first shared it on Quora in 2014 (What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about?) and I still get notifications of someone upvoting this answer daily.
But what does this horrible thing do?
It is meant to be used when you are working with layout, e.g.
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.
With the above CSS applied you will see something along the lines of:
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.
Latest comments (92)
pretty cool!
A great little tip.
Genuis!
It's so nice! :)
Thanks for sharing!
I do this often and I just add a new style rule directly in devtools as simple as
*{box-shadow: 0 0 0 1px red}
Thank you! This is very useful!
Reminds me of Addy's CSS Layout debugger
gist.github.com/addyosmani/fd3999e...
This is great, I wrote a quick extension
chrome.google.com/webstore/detail/...
VERY interesting and cool. Thanks for this!
Awesome thanks!
Ha, nice! I created a Chrome plugin, simple-debug.css, a few years back that does something similar with the following CSS:
lol just wanted to post that idea here.
There's also a plug in called Pesticide (Chrome) & Open Pesticide (Firefox) that does this by showing you the size of all divs in your page. Really handy for identifying which div is causing the bug.
Thanks for the tip!
thanks a lot, sir.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.