View layout of every website

Published on September 7th, 2019

css icon

I have recently came across this article on dev.to titled ‘My favorite CSS hack’ about styles to see layout of every page. It’s really awesome but hard to copy paste styles on every page. Luckily there is a better (and easier) way!

  1. Create new bookmark in your favorite browser
  2. Paste script as bookmark URL
javascript: (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);
  }
})();

Now you can click to bookmark to CSS layout view!