My favorite CSS hack - DEV Community 👩‍💻👨‍💻


42 bookmarks. First posted by cogdog 13 days ago.


Using x-ray goggles to see boundaries of all layout elements.
yesterday by jorgemir
I have been copy-pasting this #css snippet for 5 years:

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }

Here is why: https://t.co/kw1O2JhH4S pic.twitter.com/SQEo8bzKe8

— Gajus Kuizinas (@kuizinas) September 3, 2019

http://twitter.com/kuizinas/status/1168996089854406661
from instapaper
2 days ago by pdudits
Using x-ray goggles to see boundaries of all layout elements.
webdesign  debugging  coding  css 
3 days ago by bitboxer
Using x-ray goggles to see boundaries of all layout elements.
css  webdevelopment 
4 days ago by losfinkos
Using x-ray goggles to see boundaries of all layout elements.
css  coding  community  debugging  dev  development  engineering  html  inclusive  javascript  software  tip  via:popular  web  webdesign  webdev 
8 days ago by xer0x
Using x-ray goggles to see boundaries of all layout elements.
coding  community  css  debugging  dev  development 
8 days ago by bramchi
checking overlapping elements
css  debugging  webdesign 
8 days ago by jshwlkr
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.

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.
CSS 
9 days ago by 1luke2
* { 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); }
css 
10 days ago by jostylr
There is one CSS snippet that I have been copy-pasting for 5 years
css 
11 days ago by natelandau
My favorite CSS hack – DEV Community 👩‍💻👨‍💻
from twitter
11 days ago by jackysee
Using x-ray goggles to see boundaries of all layout elements.
css  debugging  coding  web  dev  webdev  tips  tricks 
11 days ago by lenards
Using x-ray goggles to see boundaries of all layout elements.
css  tip  webdesign 
12 days ago by okeefe77
Using x-ray goggles to see boundaries of all layout elements.
css 
12 days ago by dbuscher
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 :)
css  dev  debugging  html 
12 days ago by dstelow
Using x-ray goggles to see boundaries of all layout elements.
css  development  debugging 
12 days ago by ecyrd
There is one CSS snippet that I have been copy-pasting for 5 years:
css 
12 days ago by prcleary
I really like this
from twitter_favs
13 days ago by graftedin
I really like this
from twitter_favs
13 days ago by jtth
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.
css  coding  webdesign 
13 days ago by cogdog