Диагностический CSS

Eric Meyer предложил использовать CSS-правила для выявления ошибок на странице при верстке страницы. Код показывает ошибки на странице, если у ссылки или изображения не указан адрес или title или alt.

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

a[title] {outline-width: 0;} ! important
a[title=""] {outline-width: 3px;} ! important
a[href="#"] {background: lime;} ! important
a[href=""] {background: fuchsia;} ! important 

Демонстрацию работы данных CSS-правил смотрите на сайте Эрика Мэйера.

CSS CSS3 Юзабилити