Диагностический 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-правил смотрите на сайте Эрика Мэйера.

Пошерить
Плюсануть
Отправить
Вотсапнуть

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

1. Нажимая на кнопку "Отправить", я даю согласие на обработку персональных данных.

2. Для вставки кода используйте специальные теги [code lang="php"]ваш код[/code]