DEV Community

loading...

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...
pic
Editor guide
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
mrlopis 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 Author

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
Anton Istomin

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

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

Collapse
luzifer profile image
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!

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

Collapse
vcastroi profile image
Victor Castro

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

dev.to/vcastroi/comment/f0a4

Collapse
koresar profile image
Vasyl Boroviak

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

Collapse
antontsvil profile image
Anton T

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

Collapse
diomededavid profile image
David Diomede

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

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

Collapse
ianbromwich profile image
Mr Rager

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

Collapse
spw3bt3ch profile image
Samuel Ogunjimi

Thank you for this tip.

Collapse
iamarek profile image
Arkadiusz Chatys

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

github.com/iamarek/css-debugger

Collapse
co0kie profile image
co0kie

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}

Collapse
polemius profile image
polemius

Thank you! This is very useful!

Collapse
donghoon759 profile image
Donghoon Song

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

Collapse
gajus profile image
Gajus Kuizinas Author

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

Collapse
donghoon759 profile image
Collapse
joshhumble profile image
Josh Humble

VERY interesting and cool. Thanks for this!

Collapse
coswise profile image
Cosimo Scarpa

pretty cool!

Collapse
vuong profile image
ѵµσɳɠ 😈

It's so nice! :)

Collapse
kidkkr profile image
kidkkr

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

Collapse
youpiwaza profile image
max

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

Thanks for sharing

Collapse
innovade profile image
Madison Courto

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

Collapse
jasminelaihua profile image
JasmineLaiHua

Amazing!Like it :))

Collapse
gollyjer profile image
Jeremy Gollehon

Anybody have something similar for React Native?

Collapse
agustinl profile image
Agustín

I use pesticide chrome extension, and I love it.

Collapse
joelvarty profile image
Joel Varty

This is epic. Well done! Super useful!

Collapse
hasone profile image
HasOne

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

Collapse
abdulrahman_ali profile image
Abdulrahman Ali

Wow! That was super helpful. Thanks :)

Collapse
adamk profile image
Adam Kerney

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

Collapse
adam_cyclones profile image
Adam Crockett

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.

Collapse
nirlanka profile image
Nir Lanka ニル

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

Collapse
murroughfoley profile image
Murrough Foley

A great little tip.

Collapse
siarheibobryk profile image
Siarhei Bobryk

Thanks for sharing!

Collapse
tris profile image
tris

Lol,

Pesticide anyone?

Collapse
selengora profile image
Selen Gora

I had enlightenment, thank you! ❤️

Collapse
jstewart8053 profile image
Collapse
karmacode00 profile image
Andrea Lafertte

It's an amazing trick!

Collapse
gtyrkicksin216 profile image
Ryan Wood

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

Collapse
iamarek profile image
Collapse
kennickv profile image
Ken Vermeille

Thanks for the tip!

Collapse
quynhd3 profile image
quynhd

Thank u, this helps a lot

Collapse
realoscarcastro profile image
Oscar Castro

Awesome thanks!

Collapse
edarioq profile image
Edgar Quintero

Or just use grid

Collapse
vip3rousmango profile image
Al Romano

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

Collapse
abtahitajwar profile image
abtahi-tajwar

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

Collapse
jsphpndr profile image
Joseph Pinder

Great idea to add to my artillery.

Collapse
tariq profile image
Tariqul Islam

thanks a lot, sir.

Collapse
silvija_pro profile image
Silvija Prozinger

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.

Collapse
tyrrrz profile image
Collapse
hogan profile image
Hogan McDonald

I would recommend using Tamper Monkey browser extension. I use it to change the color of the background for my company's production site. That way, I never mistakenly place an order on production when trying to test something.

It lets you create JS snippets that run at certain domains (you can also have it run on all of them). It comes with a decent little UI for turning on and off certain scripts as well.

Thanks for the tip, this seems pretty useful!