Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Подкрашиваем положение всех элементов на странице

Порой нужно разобраться в том где расположен каждый из элементов. Это нужно обычно для того чтобы найти баг в css. Например, отловить как внезапно нарисовался скроллбар или почему появился лишний overflow.

Самое простое решение для этого – выделить все элементы добавив им рамку. Однако, использовать стиль border не стоит потому что поедет верстка, так как размеры всех элементов изменятся. Лучше воспользоваться стилем outline и повесить его на все:

В итоге выглядеть все будет примерно вот так:

outline-example-github

Поделиться:
comments powered by Disqus