Странный CSS, диагностика сайта

Thu, 29 Oct 2009 13:11:53 +0200

Тему диагностики ( 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
у картинок с альтом и тайтлом убераем аутлайн
у картинок с альтом меняем цвет аутлайна
у картинок с альтом или тайтлом меняем стиль аутлайна
если пустое что-то одно, меняем толщину
если нету ничего делаем точечками
аналогично ссылкам (только тут учитывается тайтл и хреф)
землю крестьянам, фабрики рабочим, евреям палестину

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

Комментарии к заметке

Теги:
css
debug

CSS-debug - непонятные вещи ;)

Tue, 21 Jul 2009 14:55:12 +0200

Зачем нужен? А что бы видеть вложенность всех элементов и блоков, и быстро разобраться где какой тэг не закрыт ;) ну и 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? потому что это бордер который не создаёт лишний пиксель ;), хотя он строится вне элемента!

Комментарии к заметке

Теги:
css
debug

Deerua about Coding: последние заметки с тегом «debug»

Странный CSS, диагностика сайта

CSS-debug - непонятные вещи ;)