📜 ⬆️ ⬇️

Easy way to do CSS debug

Hanging out today on the Internet in search of something interesting, stumbled upon such a simple (and equally remarkable in its simplicity) way of finding a “problem” in the layout.

CSS

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }
The color, type and size of the stroke can be chosen by everyone.

Browser Support:


FirefoxOperaGoogle chromeSafari
')
Unfortunately, in browsers from Microsoft versions 6 and 7 (in the 8th - everything is ok), the outline property is not supported. For them, perhaps, it is necessary to use the border .

Source: https://habr.com/ru/post/65009/


All Articles