This article is no longer my most current version of CSS Diagnostics. Please see my latest article A Second Look At CSS Diagnostics for the latest version.

I've been getting so many hits on this article that I decided to update it. I have added a few more elements and attributes and changed the colors around. The most severe code is colored red while less severe is colored yellow. There is also a medium severarity that is colored orange. Also remember that elements have solid borders while attributes have dotted boreders. Also check out my Test Suite showing examples of CSS Diagnostics in action.

The other day I was reading Eric Meyer's blog and stumbled across his version of what he likes to call CSS diagnostics. So what is CSS diagnostics? It's a method to highlight those ugly spots in your code, you know <font color="red" size="+1">. Yeah under the hood, somewhere on your website garbage like that exists, yet it's always so hard to hunt down and fix. Never fear CSS diagnostics is here!

CSS Diagnostics allows users to find deprecated elements using CSS and also find find deprecated attributes using CSS. Sorry to have to repeat myself so much here, I'm trying to rank high in SEO with some of these terms since this is still very much uncharted territory.

So how do you use CSS Diagnostics? It's easy! It requires a pretty good knowledge of CSS 2 & CSS 3 selectors and a good knowledge of deprecated HTML elements and attributes.

Follow these steps:

  1. Highlight Deprecated Elements

    applet, basefont, center, dir, font, isindex, menu, s, strike, u, marquee, blink, acronym /* html 5, use abbr */ { border: 5px solid red !important; }

  2. Highlight Deprecated Attributes

    br[clear], hr[noshade], *[color], *[bordercolorlight], *[bordercolordark], *[bordercolor], *[background], *[bgcolor], *[nowrap], body[alink], body[link], body[text], body[vlink], body[bottommargin], body[leftmargin], body[rightmargin], body[topmargin], body[marginheight], body[marginwidth], ol[compact], ul[compact], *[start], img[hspace], img[vspace] *[align], *[valign], *[height], *[width], ul[type], ol[type], li[type], basefont[size], font[size], hr[size] { border: 5px dotted red !important; }

  3. Highlight Proposed Deprecated Elements

    input[type="button"], input[type="reset"], input[type="submit"], tt, embed, big, small { border: 5px solid orange !important; }

  4. Highlight Proposed Deprecated Attributes

    a[target], table[cellpadding], table[cellspacing], map[name], img[name], object[name], form[name], iframe[name], a[name], table[border], img[border], object[border], input[border], object[classid], object[codebase], embed[quality], embed[pluginspage] { border: 5px dotted orange !important; }

  5. Highlight Specific Empty Elements:

    div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { padding: 20px; border: 5px solid yellow !important; }

  6. Highlight Specific Empty Attributes

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

Putting it all together:

Place this code at the end of your stylesheet:

/* Deprecated Elements */ applet, basefont, center, dir, font, isindex, menu, s, strike, u, marquee, blink, acronym /* html 5, use abbr */ { border: 5px solid red !important; } /* Deprecated Attributes */ br[clear], hr[noshade], *[color], *[bordercolorlight], *[bordercolordark], *[bordercolor], *[background], *[bgcolor], *[nowrap], body[alink], body[link], body[text], body[vlink], body[bottommargin], body[leftmargin], body[rightmargin], body[topmargin], body[marginheight], body[marginwidth], ol[compact], ul[compact], *[start], img[hspace], img[vspace] *[align], *[valign], *[height], *[width], ul[type], ol[type], li[type], basefont[size], font[size], hr[size] { border: 5px dotted red !important; } /* Proposed Deprecated Elements */ input[type="button"], input[type="reset"], input[type="submit"], tt, embed, big, small { border: 5px solid orange !important; } /* Proposed Deprecated Attributes */ a[target], table[cellpadding], table[cellspacing], map[name], img[name], object[name], form[name], iframe[name], a[name], table[border], img[border], object[border], input[border], object[classid], object[codebase], embed[quality], embed[pluginspage] { border: 5px dotted orange !important; } /* Empty Elements */ div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { padding: 20px; border: 5px solid yellow !important; } /* Empty Attributes */ *[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"] { border: 5px dotted yellow !important; }

Download The Full Stylesheet

Notes:

It's a good idea to create consistency with your rules. I chose to highlight all attributes in a solid border while highlighting all elements in a dotted border. Also choose different colors for different meanings.

It should also be pointed out that you should use the most standards complient web browser when checking for results. Currently I found that Firefox 2 seems to work best as it comes with many other addons that can work side by side with the custom CSS.

I enjoyed reading Eric's ideas on it but felt I could expand it a bit more. Certainly other's can expand on my version as well. Feel free to contact me if you see something I'm missing.

Sources