Skip to content

Instantly share code, notes, and snippets.

@bitnot
Forked from growthboot/css-layout-hack.js
Last active September 9, 2019 15:55
Show Gist options
  • Save bitnot/8df2c6f5fc93e1f4c3a1a6d81f048fc0 to your computer and use it in GitHub Desktop.
Save bitnot/8df2c6f5fc93e1f4c3a1a6d81f048fc0 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
(function() {
const element = document.querySelector('#test-layout-styles');
if (element) {
document.head.removeChild(element);
} else {
const style = document.createElement('style');
style.id = 'test-layout-styles';
style.innerHTML = `
* { background-color: rgba(255,0,0,.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(0,255,0,.2); }
* * * * * * { background-color: rgba(0,0,255,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,255,255,.2); }
`;
document.head.appendChild(style);
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment