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.

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.

Comments

[Ben Halpern]

Nice! I've seen similar variations of this sort of thing, but this is the cleanest.

I feel like it could be useful to toggle this via a browser extension.

[Victor Castro]

This works as a regular bookmark, and can toggle it, without using an extension.

dev.to/vcastroi/comment/f0a4

[Knut Ahlers]

Instead of copy-pasting the sniplet you could add it as a user-style for example to Stylus browser extension and just toggle it. (Just did that myself…)

Thanks for the idea!

[Oleksii Holub]

Clever

[Chris Achard]

Ah, very interesting... I usually resort to adding:

background-color: blue;

to whatever I'm currently debugging 🤣

This seems like a more sane alternative... :)

[David Cautin]

Interesting, I usually pick red

[Antonio Salvati 🦊]

+1 red team here :D

[Dirty-Co.de]

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 :D

[Chris Achard]

I love that strategy 🤣

[Reggev Amsalem]

I though I was the only one debugging with blue :-)

[Cécile Lebleu]

My color of choice is background-color: aliceblue, it’s softer on the eyes 😁

[Chris Achard]

Never even knew that was a color, heh... it is quite nice 😁

[Cécile Lebleu]

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.

[Gajus Kuizinas]

You might find this interesting jezebel.com/the-history-of-pink-fo... (on the subject of colour and gender identify).

[Cécile Lebleu]

Whoops. I mindlessly used a gender assumption, I apologize. I've edited the original comment. Thanks for pointing it out :)

[AJ]

Team cornflowerblue here!

[Cécile Lebleu]

Hahaha, good one!

[Maria Zaitseva]

I like to use yellow because it looks ugly. Makes me feel like a rebel.

[Ian Fabs]

The VisBug chrome extension is also amazing for CSS stuff

[kidkkr]

Nice hack. It can be extension or something for debugging.

[Victor Castro]

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

[Firoz Ansari]

I love it!!!. Your bookmarklet is very handy. Thank you.

[Patrick Keßler]

That's great!

[Keith Lewis]

Thanks Victor!

[JasmineLaiHua]

Thanks for sharing!

[Björn Zeutzheim]

Here a slightly improved variant which loads faster and does not break elements with Javascript events on the page:
gist.github.com/olee/50f0ddac55418...

[Growthboot]

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...

[raddevus]

Very cool, you can run it on any page from the browser dev console.
Thanks for posting the code.

[Joel Varty]

This is epic. Well done! Super useful!

[Vasyl Boroviak]

I believe a similar is built into the Firefox dev tools. (Also I find their dev tools better than Chrome).

[Anton T]

It was called 3d tilt or something like that. Very cool feature that was unfortunately discontinued.