Tutorial CSS Diagnostics

by in , 0

Find mistakes in HTML and highlight the crap out of them.

/* Empty Elements */
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty
{ padding: 20px; border: 5px dotted yellow !important; }

/* Empty Attributes */
*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"]
{ border: 5px solid yellow !important; }

/* Deprecated Elements */
applet, basefont, center, dir, font, isindex, menu, s, strike, u
{ border: 5px dotted red !important; }

/* Deprecated Attributes */
*[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start],
*[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink],
*[align], *[valign],
*[hspace], *[vspace],
*[height], *[width],
ul[type], ol[type], li[type]
{ border: 5px solid red !important; }

/* Proposed Deprecated Elements */
input[type="button"], big, tt
{ border: 5px dotted #33FF00 !important; }

/* Proposed Deprecated Attributes */
*[border], a[target], table[cellpadding], table[cellspacing], *[name]
{ border: 5px solid #33FF00 !important; }

Eric Meyer's version:

div:empty, span:empty,
li:empty, p:empty,
td:empty, th:empty {padding: 0.5em; background: yellow;}

*[style], font, center {outline: 5px solid red;}
*[class=""], *[id=""] {outline: 5px dotted red;}

img[alt=""] {border: 3px dotted red;}
img:not([alt]) {border: 5px solid red;}
img[title=""] {outline: 3px dotted fuchsia;}
img:not([title]) {outline: 5px solid fuchsia;}

table:not([summary]) {outline: 5px solid red;}
table[summary=""] {outline: 3px dotted red;}
th {border: 2px solid red;}
th[scope="col"], th[scope="row"] {border: none;}

a[href]:not([title]) {border: 5px solid red;}
a[title=""] {outline: 3px dotted red;}
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

Leave a Reply