29 октября 2009, 13:11

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

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


Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter