CSS Diagnostics

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;}


  1. Brad Czerniak
    Permalink to comment#
    .diag animate,.diag applet,.diag audioscope,.diag basefont,.diag blackface,.diag blink,.diag bq,.diag center,.diag comment,.diag dir,.diag embed,.diag fn,.diag font,.diag ilayer,.diag image,.diag isindex,.diag keygen,.diag layer,.diag limittext,.diag listing,.diag marquee,.diag menu,.diag multicol,.diag nobr,.diag noembed,.diag nolayer,.diag nosmartquotes,.diag plaintext,.diag s,.diag shadow,.diag sidebar,.diag spacer,.diag strike,.diag u,.diag wbr,.diag xmp{background:#ffcccc;outline:3px solid #ff0000 !important;}
    .diag [align],.diag [bgcolor],body.diag[alink],body.diag[background],body.diag[bgcolor],body.diag[bgproperties],body.diag[bordercolor],body.diag[bordercolordark],body.diag[bordercolorlight],body.diag[leftmargin],body.diag[link],body.diag[rightmargin],body.diag[text],body.diag[vlink],.diag a[href^="javascript:"],.diag br[clear],.diag caption[usestyle],.diag dl[compact],.diag form[target],.diag frameset[framespacing],.diag hr[noshade],.diag hr[size],.diag hr[width],.diag img[border],.diag img[controls],.diag img[dynsrc],.diag img[hspace],.diag img[ibmlogo],.diag img[internal-gopher-menu],.diag img[left_arrow],.diag img[loop],.diag img[red_bullet],.diag img[start],.diag img[vspace],.diag input[valign],.diag li[type],.diag li[value],.diag object[border],.diag object[hspace],.diag object[vspace],.diag ol[compact],.diag ol[start],.diag ol[type],.diag pre[width],.diag select[autoactivate],.diag table[frame],.diag td[height],.diag td[nowrap],.diag td[width],.diag th[height],.diag th[nowrap],.diag th[width],.diag ul[compact],.diag ul[type]{background:#ffcccc !important;outline:3px solid #ff0000 !important;}
    .diag div:empty,.diag li:empty,.diag p:empty,.diag span:empty,.diag td:empty,.diag th:empty{background:#ffff00;}
    .diag [abbr=""],.diag [accept-charset=""],.diag [accept=""],.diag [accesskey=""],.diag [action=""],.diag [align=""],.diag [alink=""],.diag [archive=""],.diag [axis=""],.diag [background=""],.diag [bgcolor=""],.diag [border=""],.diag [cellpadding=""],.diag [char=""],.diag [charoff=""],.diag [charset=""],.diag [checked=""],.diag [cite=""],.diag [class=""],.diag [classid=""],.diag [clear=""],.diag [code=""],.diag [codebase=""],.diag [codetype=""],.diag [color=""],.diag [cols=""],.diag [colspan=""],.diag [compact=""],.diag [content=""],.diag [coords=""],.diag [data=""],.diag [datetime=""],.diag [declare=""],.diag [defer=""],.diag [dir=""],.diag [disabled=""],.diag [enctype=""],.diag [face=""],.diag [for=""],.diag [frame=""],.diag [frameborder=""],.diag [headers=""],.diag [height=""],.diag [href=""],.diag [hreflang=""],.diag [hspace=""],.diag [http-equiv=""],.diag [id=""],.diag [ismap=""],.diag [label=""],.diag [lang=""],.diag [language=""],.diag [link=""],.diag [longdesc=""],.diag [marginheight=""],.diag [marginwidth=""],.diag [maxlength=""],.diag [media=""],.diag [method=""],.diag [multiple=""],.diag [name=""],.diag [nohref=""],.diag [noresize=""],.diag [noshade=""],.diag [nowrap=""],.diag [object=""],.diag [onblur=""],.diag [onchange=""],.diag [onclick=""],.diag [ondblclick=""],.diag [onfocus=""],.diag [onkeydown=""],.diag [onkeypress=""],.diag [onkeyup=""],.diag [onload=""],.diag [onmousedown=""],.diag [onmousemove=""],.diag [onmouseout=""],.diag [onmouseover=""],.diag [onmouseup=""],.diag [onreset=""],.diag [onselect=""],.diag [onsubmit=""],.diag [onunload=""],.diag [profile=""],.diag [prompt=""],.diag [readonly=""],.diag [rel=""],.diag [rev=""],.diag [rows=""],.diag [rowspan=""],.diag [rules=""],.diag [scheme=""],.diag [scope=""],.diag [scrolling=""],.diag [selected=""],.diag [shape=""],.diag [size=""],.diag [span=""],.diag [src=""],.diag [standby=""],.diag [start=""],.diag [style=""],.diag [summary=""],.diag [tabindex=""],.diag [target=""],.diag [text=""],.diag [title=""],.diag [type=""],.diag [usemap=""],.diag [valign=""],.diag :note([type="text"])[value=""],.diag [valuetype=""],.diag [version=""],.diag [vlink=""],.diag [vspace=""],.diag [width=""]{background:#ffff00;}
    .diag a[href="#"],.diag area:not([alt]),.diag form:not([action]),.diag img:not([alt]),.diag img:not([src]),.diag map:not([name]),.diag optgroup:not([label]),.diag textarea:not([cols]),.diag textarea:not([rows]){outline:3px solid #ff0000 !important;}
    /* --BAD PRACTICE-- */
    .diag b,.diag big,.diag i,.diag small,.diag tt{outline:3px solid #ffff00 !important;}
    .diag style{background:#ffff00 !important;display:block !important;}
    .diag table table{outline:3px solid #ff0000 !important;}
    .diag [style],.diag table[cellspacing],.diag table[cellpadding],body.diag[onclick],body.diag[ondblclick],body.diag[onload],body.diag[onmousedown],body.diag[onmousemove],body.diag[onmouseout],body.diag[onmouseover],body.diag[onmouseup],body.diag[onkeydown],body.diag[onkeypress],body.diag[onkeyup],body.diag[onunload],.diag [onload],.diag [onunload],.diag [onchange],.diag [onsubmit],.diag [onreset],.diag [onselect],.diag [onblur],.diag [onfocus],.diag [onkeydown],.diag [onkeypress],.diag [onkeyup],.diag [onclick],.diag [ondblclick],.diag [onmousedown],.diag [onmousemove],.diag [onmouseover],.diag [onmouseout],.diag [onmouseup]{outline:3px solid #ffff00;}
    .diag label:not([for]){outline:3px solid #ffff00 !important;}
  2. Brad Czerniak
    Permalink to comment#

    You can apply the diagnostic styles in the above content with a bookmarklet:

  3. Tiffany
    Permalink to comment#

    “Depreciated” :) sorry.

  4. TerranRich
    Permalink to comment#

    I don’t understand how the “name” attribute can be deprecated anytime soon. That’s what the form sends to the action page upon submit. Unless it’s changed to ID, in which case the form would have to send that data instead of “name”.

  5. Vikas Hatwal

    Cant understand… this.. :(

    • Jonathan
      Permalink to comment#

      The CSS above is actually only to debug elements and proprites olders! And now?

  6. tULIO
    Permalink to comment#

    my site is green and i have never seen it SOOO RED!
    this can’t by right LOL
    *f-ck that guy face here*

  7. Kieran
    Permalink to comment#

    a[target]? I don’t get it. The only alternative I can think of is
    document.getElementById(“URL”).target = “_blank”;

    Why would you remove target?

  8. lucky
    Permalink to comment#

    thanks dear sir
    this code is imaging but sir please mention the output of the code

    • VR

      Using provided CSS on your web page ONLY during development process.
      The CSS should provide you with information on depricated/broken/wrong HTML implementations.

  9. Duncan McDougall
    Permalink to comment#

    A heads up that a[target] is no longer deprecated.

    The target attribute on the a element was deprecated in a previous version of HTML, but is no longer deprecated, as it useful in Web applications, particularly in combination with the iframe element.

    Source: http://dev.w3.org/html5/markup/a.html

  10. JCron
    Permalink to comment#

    This is pretty awesome! Any chance on an updated set of rules for 2016?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.