Skip to content

Instantly share code, notes, and snippets.

@olee
Forked from vcastroi/css-layout-hack.js
Last active July 19, 2024 01:08
Show Gist options
  • Save olee/50f0ddac55418f705e0c5759e15e946d to your computer and use it in GitHub Desktop.
Save olee/50f0ddac55418f705e0c5759e15e946d to your computer and use it in GitHub Desktop.
// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
var styleEl = document.getElementById('css-layout-hack');
if (styleEl) {
styleEl.remove();
return;
}
styleEl = document.createElement('style');
styleEl.id = 'css-layout-hack';
styleEl.innerHTML = '* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\
* * { background-color: rgba(0,255,0,.2) !important; }\
* * * { background-color: rgba(0,0,255,.2) !important; }\
* * * * { background-color: rgba(255,0,255,.2) !important; }\
* * * * * { background-color: rgba(0,255,255,.2) !important; }\
* * * * * * { background-color: rgba(255,255,0,.2) !important; }\
* * * * * * * { background-color: rgba(255,0,0,.2) !important; }\
* * * * * * * * { background-color: rgba(0,255,0,.2) !important; }\
* * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }';
document.body.append(styleEl);
})();
@simonewebdesign
Copy link

It works beautifully, thank you!

@martinlechner1
Copy link

Bookmarked...

@ahmadajmi
Copy link

Thank you!

@thinh105
Copy link

thinh105 commented Aug 1, 2020

awesome, thank for that tip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment