Skip to content

Instantly share code, notes, and snippets.

@growthboot

growthboot/css-layout-hack.js

Forked from vcastroi/css-layout-hack.js
Last active April 8, 2024 07:01
Show Gist options
  • Save growthboot/5c189cf854c6609d3113355c75527c1c to your computer and use it in GitHub Desktop.
Save growthboot/5c189cf854c6609d3113355c75527c1c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-layout-hack.js
// 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 domStyle = document.createElement("style");
domStyle.append(
'* { 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.appendChild(domStyle);
})();
@growthboot
Copy link
Author

Using document.body.innerHTML += recreates every node on the page therefor theoretically unbinding any potential events that were set. This breaks the functionality most websites. I fixed it by using the appendChild method which leaves all other nodes on the page untouched.

@bitnot
Copy link

bitnot commented Sep 9, 2019

Neat hack!
Now that you have document.createElement("style") there is no need to include <style> and </style> in the domStyle.append call.

// 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 domStyle = document.createElement("style");
    domStyle.append(
           '* { 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.appendChild(domStyle);
})();

@growthboot
Copy link
Author

Great point!! Amazing how it was still working for me with that issue there.

@ZeroDragon
Copy link

ZeroDragon commented Sep 9, 2019 •
edited
Loading

I made a slight improvement. NOW you can trully turn it ON and OFF with the same bookmarklet on the fly (no need to reload)

javascript: (function() {
  let domStyle = document.getElementById('domStylee');
  if (domStyle) {
    document.body.removeChild(domStyle);
    return;
  }
  domStyle = document.createElement("style");
  domStyle.setAttribute('id', 'domStylee');
  domStyle.append(
    ['* { 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; }'].join()
  );
  document.body.appendChild(domStyle);
})();

@inalbant
Copy link

inalbant commented Dec 9, 2019

I made a slight improvement. NOW you can trully turn it ON and OFF with the same bookmarklet on the fly (no need to reload)

javascript: (function() {
  let domStyle = document.getElementById('domStylee');
  if (domStyle) {
    document.body.removeChild(domStyle);
    return;
  }
  domStyle = document.createElement("style");
  domStyle.setAttribute('id', 'domStylee');
  domStyle.append(
    ['* { 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; }'].join()
  );
  document.body.appendChild(domStyle);
})();

this works perfectly in Chrome, but I couldn't get it to work in Firefox Dev Edition. Any ideas?

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