A CSS hack to show page element layouts

Today I stumbled over an interesting blog post by Gajus Kuizinas which was linked in the very interesting newsletter of Webdesigner News. The idea is to inject a CSS style snippet into a web page to show the layout of all web page elements. This can be achieved by setting a different translucent background color for every depth of nodes. This way you can see the size, the margin and the padding of each element on the page and can easily spot errors while developing the layout of a web page.

The original code is as follows:

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.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(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

For every nesting level, a different translucent background color is applied.

This code was quickly refined by a lot of people to a javascript bookmarklet (e.g. here and here and by many other people) so you can easily apply it to every web page. To see my take on this, click on the following link to toggle a page element view on and off on this web page :

To use it you can create a bookmark with a title of your liking and use the following code as the URL:

javascript: (() => {
  const element = document.querySelector('#show-element-layout-style');
  if (element) {
    document.body.removeChild(element);
  } else {
    var style = document.createElement('style');
    style.id = 'show-element-layout-style';
    style.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(style);		
  }
})();

By clicking on that bookmark you can quickly toggle the element view on and off.