DEV Community

Gajus Kuizinas
Gajus Kuizinas

Posted on • Updated on

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); }

Enter fullscreen mode Exit fullscreen mode

^ 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); } }

Enter fullscreen mode Exit fullscreen mode

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.

Without CSS hack

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:

With CSS hack

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 (95)

Collapse
 
vcastroi profile image
Victor Castro • Edited

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:

washingtonpost

code here

Collapse
 
olee profile image
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...

Collapse
 
growthboot profile image
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...

Thread Thread
 
raddevus profile image
raddevus • Edited

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

Collapse
 
firozansari profile image
Firoz Ansari

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

Collapse
 
jasminelaihua profile image
JasmineLaiHua

Thanks for sharing!

Collapse
 
patke92 profile image
Patrick Keßler

That's great!

Collapse
 
jacrys profile image
Keith Lewis

Thanks Victor!

Collapse
 
dink profile image
dink • Edited

Much quicker to do the following imo:

html * {
    background: rgba(255, 0, 0, .1);
    box-shadow: 0 0 0 1px red;
}
Enter fullscreen mode Exit fullscreen mode

It will produce something like this:

Debug

Collapse
 
tariq profile image
Tariqul Islam

Thanks man..

Collapse
 
asimdahall profile image
Asim Dahal

border:1px solid red is the console.log for me in css 🤣

Collapse
 
guesshimself profile image
Eric Guess

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

Collapse
 
lopis profile image
Joao L.

Borders will potentially change the layout of some elements. Use outline instead!

Collapse
 
evertalbers profile image
Evert Albers

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.

Collapse
 
abhishekcghosh profile image
Abhishek Ghosh

It's like somebody read my mind! :D

Collapse
 
chrisachard profile image
Chris Achard

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

background-color: blue;
Enter fullscreen mode Exit fullscreen mode

to whatever I'm currently debugging 🤣

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

Collapse
 
cecilelebleu profile image
Cécile Lebleu

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

Collapse
 
chrisachard profile image
Chris Achard

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

Thread Thread
 
cecilelebleu profile image
Cécile Lebleu • Edited

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.

Thread Thread
 
gajus profile image
Gajus Kuizinas

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

Thread Thread
 
cecilelebleu profile image
Cécile Lebleu

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

Thread Thread
 
andreasvirkus profile image
ajv

Team cornflowerblue here!

Thread Thread
 
cecilelebleu profile image
Cécile Lebleu

Hahaha, good one!

Collapse
 
pinguinosod profile image
David Cautin

Interesting, I usually pick red

Collapse
 
dirtycode1337 profile image
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

Thread Thread
 
chrisachard profile image
Chris Achard

I love that strategy 🤣

Collapse
 
salvan13 profile image
Antonio Salvati 🦊

+1 red team here :D

Collapse
 
tailcall profile image
Maria Zaitseva

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

Collapse
 
reggev_amsalem profile image
Reggev Amsalem

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

Collapse
 
_juliettech profile image
juliette_chevalier • Edited

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.
See example here

Collapse
 
shramee profile image
Shramee Srivastav

Sweet!

I have a contrib...

Because we always have html and body as parents 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 😄

body * { background-color: rgba(255,0,0,.2); }
body * * { background-color: rgba(0,255,0,.2); }
body * * * { background-color: rgba(0,0,255,.2); }
body * * * * { background-color: rgba(255,0,255,.2); }
body * * * * * { background-color: rgba(0,255,255,.2); }
body * * * * * * { background-color: rgba(255,255,0,.2); }
body * * * * * * * { background-color: rgba(255,0,0,.2); }
body * * * * * * * * { background-color: rgba(0,255,0,.2); }
body * * * * * * * * * { background-color: rgba(0,0,255,.2); }
Collapse
 
chrisnager profile image
Chris Nager • Edited

Ha, nice! I created a Chrome plugin, simple-debug.css, a few years back that does something similar with the following CSS:

*{outline:1px solid #fff!important;background-color:rgba(0,2,54,.1)!important}
Collapse
 
heygambo profile image
Christian Gambardella

lol just wanted to post that idea here.

Collapse
 
lorefnon profile image
Lorefnon

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

Collapse
 
prisme profile image
Jérémy Saint-Prix
Collapse
 
fwolfst profile image
Felix Wolfsteller

wanted to share exactly that.

Collapse
 
_smellycode profile image
нιтєѕн кυмαя

Reminds me of Addy's CSS Layout debugger

$$('*').map((A,B)=>A.style.outline=`1px solid hsl(${B*B},99%,50%`)

gist.github.com/addyosmani/fd3999e...

Collapse
 
ianfabs profile image
Ian Fabs

The VisBug chrome extension is also amazing for CSS stuff

Collapse
 
csumner profile image
Chris

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!

Collapse
 
kevinhch profile image
Kevin

good tip, but never can replace the classic: *{outline: 1px solid red} :)

Collapse
 
stephanie profile image
Stephanie Handsteiner

outline: 1px solid red; is my css equivalent to console.log() 😂

Collapse
 
j9t profile image
Jens Oliver Meiert

CSS is really great for inspection. Have you checked out older debugging or quality control style sheets like github.com/j9t/qa-style-sheet (mentioning because it’s quite comprehensive but can also use backup) or classic meyerweb.com/eric/thoughts/2007/09...?

Collapse
 
codepo8 profile image
Christian Heilmann

Interesting. I am working on the developer tools for Edge and this might just be an interesting option to add.

Collapse
 
gajus profile image
Gajus Kuizinas

I will take the credit any time of the day. :-)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.