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!

Patrick Keßler • Sep 4 '19

That's great!

Keith Lewis • Sep 4 '19

Thanks Victor!

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

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

ajv • Sep 5 '19

Team cornflowerblue here!

Cécile Lebleu • Sep 5 '19

Hahaha, good one!

David Cautin • Sep 4 '19

Interesting, I usually pick red

Dirty-Co.de • Sep 5 '19

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

I love that strategy 🤣

Antonio Salvati 🦊 • Sep 5 '19

+1 red team here :D

Maria Zaitseva • Sep 5 '19

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

Reggev Amsalem • Sep 4 '19

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

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

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.

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

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

Ian Fabs • Sep 3 '19

The VisBug chrome extension is also amazing for CSS stuff

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

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

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!

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

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.

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

Ian B • Sep 4 '19

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

Samuel Ogunjimi • Sep 5 '19

Thank you for this tip.

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!

Josh Humble • Sep 10 '19

VERY interesting and cool. Thanks for this!

Cos • Dec 1 '20

pretty cool!

vuong ⛈️ • Mar 6 '20

It's so nice! :)

kidkkr • Sep 3 '19

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

max • Sep 4 '19

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

Thanks for sharing

Madison Courto • Sep 19 '19

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

JasmineLaiHua • Sep 4 '19

Amazing!Like it :))

Jeremy Gollehon • Sep 4 '19

Anybody have something similar for React Native?

Agustín • Sep 4 '19

I use pesticide chrome extension, and I love it.

Joel Varty • Sep 4 '19

This is epic. Well done! Super useful!

HasOne • Sep 6 '19

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

Abdulrahman Ali • Sep 6 '19

Wow! That was super helpful. Thanks :)

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.

Nir Lanka ニル • Sep 5 '19

I was skeptic first, but then realized how much it makes sense. Great have!

Murrough Foley • Jul 18 '20

A great little tip.

Siarhei Bobryk • Jan 4 '20

Thanks for sharing!

tris • Sep 4 '19

Lol,

Pesticide anyone?

Selen Gora • Sep 6 '19

I had enlightenment, thank you! ❤️

jstewart8053 • May 25 '20

Genuis!

Andrea Lafertte • Sep 5 '19

It's an amazing trick!

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

Arkadiusz Chatys • Sep 4 '19

So good.

Ken Vermeille • Sep 9 '19

Thanks for the tip!

quynhd • Sep 5 '19

Thank u, this helps a lot

Oscar Castro • Sep 9 '19

Awesome thanks!

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?

Joseph Pinder • Sep 4 '19

Great idea to add to my artillery.

Tariqul Islam • Sep 8 '19

thanks a lot, sir.

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.

Oleksii Holub • Sep 3 '19

Clever