An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
My favorite CSS hack
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.
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.
Original Link: https://dev.to/gajus/my-favorite-css-hack-32g3
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To