Skip to content

Instantly share code, notes, and snippets.

@usingthesystem

usingthesystem/css-layout-hack.js

Forked from growthboot/css-layout-hack.js
Created November 13, 2019 10:32
Show Gist options
  • Save usingthesystem/e9b8b7d183d34f3849fd69d94e81472f to your computer and use it in GitHub Desktop.
Save usingthesystem/e9b8b7d183d34f3849fd69d94e81472f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @growthboot growthboot revised this gist Sep 9, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions css-layout-hack.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,15 +3,15 @@
    javascript: (function() {
    var domStyle = document.createElement("style");
    domStyle.append(
    '<style>* { color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !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; }</style>'
    * * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }'
    );
    document.body.appendChild(domStyle);
    })();
  2. @growthboot growthboot revised this gist Sep 5, 2019. 1 changed file with 6 additions and 16 deletions.
    22 changes: 6 additions & 16 deletions css-layout-hack.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,17 @@
    // 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 elements = document.body.getElementsByTagName('*');
    var items = [];
    for (var i = 0; i < elements.length; i++) {
    if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
    items.push(elements[i]);
    }
    }
    if (items.length > 0) {
    for (var i = 0; i < items.length; i++) {
    items[i].innerHTML = '';
    }
    } else {
    document.body.innerHTML +=
    '<style>* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\
    var domStyle = document.createElement("style");
    domStyle.append(
    '<style>* { 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; }</style>';
    }
    * * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }</style>'
    );
    document.body.appendChild(domStyle);
    })();
  3. @vcastroi vcastroi created this gist Sep 4, 2019.
    27 changes: 27 additions & 0 deletions css-layout-hack.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    // 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 elements = document.body.getElementsByTagName('*');
    var items = [];
    for (var i = 0; i < elements.length; i++) {
    if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
    items.push(elements[i]);
    }
    }
    if (items.length > 0) {
    for (var i = 0; i < items.length; i++) {
    items[i].innerHTML = '';
    }
    } else {
    document.body.innerHTML +=
    '<style>* { 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; }</style>';
    }
    })();