Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

This works quite well:

function DEBUGborders(){
   console.log("Borders on");
   var Element = document.createElement('style');
   document.head.appendChild(Element);
   var Sheet = Element.sheet;
   Sheet.insertRule("*{outline: 1px red solid;}", 0);
} DEBUGborders()

Copy pasting that code into the console of your browser will give you red outlines of the borders of every CSS object in your browser.

For kicks I have attached a screen shot of what happens to this page when you apply this trick:

Why is this useful? Well if we are going to make our websites and applications simpler we need to have good visibility on our legacy. This approach is extremely effective in quickly visualizing grid layouts which a very simple way to managing positioning in modern browsers. See laying out a page with grid.

  • No labels