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.
Top comments (92)
thanks, made a toggleable bookmark (no need for an extension) with this + another CSS I was using (that removes background + adds a red outline). looks like this:
code here
Here a slightly improved variant which loads faster and does not break elements with Javascript events on the page:
gist.github.com/olee/50f0ddac55418...
Just noticed your post after I already fixed it for myself as well. But in mine I took off the added code to remove background images. Removing background images is not desirable in a lot of cases, especially web apps.
Here's my code:
gist.github.com/growthboot/5c189cf...
Very cool, you can run it on any page from the browser dev console.
Thanks for posting the code.
I love it!!!. Your bookmarklet is very handy. Thank you.
Thanks for sharing!
Thanks Victor!
That's great!
Much quicker to do the following imo:
It will produce something like this:
Thanks man..
border:1px solid red
is the console.log for me in css 🤣outline: 1px solid #f00
is my go-to for this since the outline doesn't affect size, and#f00
is just kinda fun to type instead of red :)Borders will potentially change the layout of some elements. Use outline instead!
border-box
is slightly better since that does not affect the box-sizes. And using a weird color like light-green works usually best for me.It's like somebody read my mind! :D
Ah, very interesting... I usually resort to adding:
to whatever I'm currently debugging 🤣
This seems like a more sane alternative... :)
My color of choice is
background-color: aliceblue
, it’s softer on the eyes 😁Never even knew that was a color, heh... it is quite nice 😁
And to compare I use
lavenderblush
. I know it’s really pastel, but most of my web dev is on bright background, so using red or blue is like poking myself in the eye with a pen.You might find this interesting jezebel.com/the-history-of-pink-fo... (on the subject of colour and gender identify).
Whoops. I mindlessly used a gender assumption, I apologize. I've edited the original comment. Thanks for pointing it out :)
Team
cornflowerblue
here!Hahaha, good one!
Interesting, I usually pick red
I usually pick
rebeccapurpe
- because I only type "re" instead of "red" and Chrome autocompletes it to "rebeccapurple". It also wants you to get your stuff fixed asap because of its color to get rid of it :DI love that strategy 🤣
+1 red team here :D
I like to use yellow because it looks ugly. Makes me feel like a rebel.
I though I was the only one debugging with blue :-)
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.
Sweet!
I have a contrib...
Because we always have
html
andbody
asparents
wrapping everything (associated with layout), first two rules just add 2 extra layers of background, selecting everything under body would allow going nine levels inside body 😄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.
Nice :) Another similar hack I frequently use is using a repeating svg grid as html background against body with reduced transparency. Helps a lot with alignment issues. lorefnon.tech/2019/01/12/using-an-...
My mind has been officially blown! How have I not found this sooner??
I've added more nested levels to accommodate some deeper levels of the dom, but that's a simple copy and paste job from the code above.
I'll be adding the bookmark for sure!
The VisBug chrome extension is also amazing for CSS stuff
Some comments may only be visible to logged-in visitors. Sign in to view all comments.