DEV Community

My favorite CSS hack

Gajus Kuizinas on September 03, 2019

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

Read full post

Victor Castro • Sep 4 '19 • 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:

code here

Björn Zeutzheim • Sep 5 '19

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 • Sep 5 '19

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 • Sep 9 '19 • Edited

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

Firoz Ansari • Sep 4 '19

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

JasmineLaiHua • Sep 4 '19

Thanks for sharing!

dink • Sep 5 '19 • Edited

Much quicker to do the following imo:

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

It will produce something like this:

Tariqul Islam • Sep 14 '19

Thanks man..

Asim Dahal • Sep 4 '19

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

Eric Guess • Sep 4 '19

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

João L. • Sep 4 '19

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

Evert Albers • Sep 10 '19

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.

Abhishek Ghosh • Sep 4 '19

It's like somebody read my mind! :D

Chris Achard • Sep 3 '19

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

background-color: blue;

to whatever I'm currently debugging 🤣

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

Cécile Lebleu • Sep 5 '19

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

Chris Achard • Sep 5 '19

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

Cécile Lebleu • Sep 5 '19 • 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.

Gajus Kuizinas • Sep 5 '19

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

Cécile Lebleu • Sep 5 '19

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

_juliettech • Sep 9 '19 • 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.

Shramee Srivastav • Sep 4 '19

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

Lorefnon • Sep 4 '19

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

Chris Nager • Sep 9 '19 • 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}

Christian Gambardella • Sep 11 '19

lol just wanted to post that idea here.

Ian Fabs • Sep 3 '19

The VisBug chrome extension is also amazing for CSS stuff

Jérémy Saint-Prix • Sep 5 '19

makes me regret developer.mozilla.org/en-US/docs/T...

Felix Wolfsteller • Sep 9 '19

wanted to share exactly that.

нιтєѕн кυмαя • Sep 24 '19

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

Chris • Sep 4 '19

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!

Kevin • Sep 4 '19

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

Stephanie Handsteiner • Sep 4 '19

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

Ben Halpern • Sep 3 '19

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 • Sep 4 '19

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

dev.to/vcastroi/comment/f0a4

Knut Ahlers • Sep 3 '19

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!

Vasyl Boroviak • Sep 4 '19

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

Anton T • Sep 7 '19

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

Ian B • Sep 4 '19

I use pesticide for chrome. I get too anxious adding stuff like this to my codebase 😂

David Diomede • Sep 4 '19

Firefox added a clickable element to the dom for flex box and grid.

developer.mozilla.org/en-US/docs/T...

Jens Oliver Meiert • Sep 5 '19

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

Christian Heilmann • Sep 5 '19

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

Gajus Kuizinas • Sep 5 '19

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

Samuel Ogunjimi • Sep 5 '19

Thank you for this tip.

Josh Humble • Sep 10 '19

VERY interesting and cool. Thanks for this!

Arkadiusz Chatys • Sep 4 '19

I've created simple chrome extension for this to toggle on websites

github.com/iamarek/css-debugger

co0kie • Nov 15 '19

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}

polemius • Sep 25 '19

Thank you! This is very useful!

Donghoon Song • Sep 5 '19

Wow so nice!!! If you dont mind,may I translate this into Korean so that others can also read it?

Gajus Kuizinas • Sep 5 '19

Of course. Just share a link back. :-)

Donghoon Song • Sep 6 '19

medium.com/%EC%96%B8%EC%96%B4%EC%9...

here!

Silvija Prozinger • Sep 4 '19

Interesting, thank you for sharing this! Whenever I think I know what CSS is all about I learn about a new hack I would never even think of, CSS is definitely more interesting than it seems.

jstewart8053 • May 25 '20

Genuis!

Ryan Wood • Sep 4 '19

Seeing all those universal selectors made my eye start to twitch, and then I read what you are using it for. This is pretty interesting. Sharing with my team

Murrough Foley • Jul 18 '20

A great little tip.

max • Sep 4 '19

Wow, I'm gonna give this a try, and will probably use it from now on -

Thanks for sharing

Andrea Lafertte • Sep 5 '19

It's an amazing trick!

Cos • Dec 1 '20

pretty cool!

Abdulrahman Ali • Sep 6 '19

Wow! That was super helpful. Thanks :)

HasOne • Sep 6 '19

ohhhhhhhhhhhhoo, You just popped up my mind, Thanks, man!

Selen Gora • Sep 6 '19

I had enlightenment, thank you! ❤️

Tariqul Islam • Sep 8 '19

thanks a lot, sir.

Ken Vermeille • Sep 9 '19

Thanks for the tip!

Joel Varty • Sep 4 '19

This is epic. Well done! Super useful!

kidkkr • Sep 3 '19

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

Oscar Castro • Sep 9 '19

Awesome thanks!

Oleksii Holub • Sep 3 '19

Clever

Madison Courto • Sep 19 '19

This is great, I wrote a quick extension
chrome.google.com/webstore/detail/...

Edgar Quintero • Sep 4 '19

Or just use grid

Al Romano • Sep 4 '19

Chris Pederick's Web Developer extension's Outline tab has had this and other features for many years... :)

abtahi-tajwar • Sep 7 '19

You can the same thing quite easily with chromes developer tool right?

tris • Sep 4 '19

Lol,

Pesticide anyone?

JasmineLaiHua • Sep 4 '19

Amazing!Like it :))

Siarhei Bobryk • Jan 4 '20

Thanks for sharing!

Ashe • Sep 5 '19

Definitely going to use this on future projects, thanks for sharing!!!!

Adam Crockett 🌀 • Sep 5 '19

Oh thank goodness your not going to use this in prod! I have seen some developer tools do something similar. I think browsersync admin does have utils like this too.