Верх страницы
Обложка к записи Диагностический CSS
Время для прочтения: 0 мин. 0 сек.

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

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы