Skip to content

Instantly share code, notes, and snippets.

@olee

olee/css-layout-hack.js

Forked from vcastroi/css-layout-hack.js
Last active July 19, 2024 01:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save olee/50f0ddac55418f705e0c5759e15e946d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save olee/50f0ddac55418f705e0c5759e15e946d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. olee revised this gist Sep 5, 2019. 1 changed file with 16 additions and 22 deletions.
    38 changes: 16 additions & 22 deletions css-layout-hack.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,21 @@
    // 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>';
    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);
    })();
  2. @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>';
    }
    })();