Diagnostica con i css

Avete mai pensato che attraverso un CSS è possibile evidenziare gli errori di codice?
In rete se ne trovano moltissimi, questo che riporto è un esempio molto semplice (scaricabile qui).
Semplicemente il CSS individua tutti gli 'errori' che non verrebbero validati e li propone in colore o bordati, segnalando visivamente cosa non va.
Attenzione: non vengon segnalati gli errori di sintassi ma l'utilizzo di tag vuoti, elementi deprecati, attributi vuoti etc etc

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