Deerua about Coding -> Заметки с тегом «debug»

Тему диагностики ( CSS дебага сайта) можно расширить ;)

Некто Eric Meyer углубился в тему такого дебага, и разработал такой себе debug.css для правильных браузеров:

div:empty, span:empty, li:empty, 
p:empty, td:empty, th:empty {
	padding: 0.5em­; background: yellow­;}
*[style], img, a[href], font, center {
	outline: 5px solid red­;}
table, th {border: 5px solid red­;}
img[alt][title] {outline-width: 0­;}
img[alt] {outline-color: fuchsia­;}
img[alt], img[title] {outline-style: double­;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px­;}
img[alt=""][title=""] {outline-style: dotted­;}
table[summary], 
th[scope="col"], 
th[scope="row"] {border: 1px solid #AAA­;}
a[title] {outline-width: 0­;}
a[title=""] {outline-width: 3px­;}
a[href="#"] {background: lime­;}
a[href=""] {background: fuchsia­;}
li {margin: 0.67em 0­;} 

Что тут происходит? Всё просто:

• всем пустым контейнерам фон жёлтый
• сразу всем картитнкам внешний бордер (аутлайн) 5пх, таблицам простой 5пх, а также ссылкам и порочащим css тегам :D
• у картинок с альтом и тайтлом убераем аутлайн
• у картинок с альтом меняем цвет аутлайна
• у картинок с альтом или тайтлом меняем стиль аутлайна
• если пустое что-то одно, меняем толщину
• если нету ничего делаем точечками
• аналогично ссылкам (только тут учитывается тайтл и хреф)
• землю крестьянам, фабрики рабочим, евреям палестину

• Посмотреть Пример у Автора

Зачем нужен? А что бы видеть вложенность всех элементов и блоков, и быстро разобраться где какой тэг не закрыт ;) ну и WebDeveloper toolbar в помощь!

* { 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­; }

Для ИЕ6-7 вместо outline, пишем border.
ЗЫ: почему outline а не border? потому что это бордер который не создаёт лишний пиксель ;), хотя он строится вне элемента!