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

Источник: https://www.kobzarev.com/browser/diagnostic-css/

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

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

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

%d такие блоггеры, как: