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

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

ВКонтакте
Одноклассники
Linkedin
Telegram
WhatsApp

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

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все.

Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса.

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

Комментарии
Следующая запись