Un CSS per evidenziare i tag e gli attributi deprecati

[The Captain]

Ho trovato questo CSS utilissimo di Neal Grosskopf che evidenzia tutti gli attributi e i tag deprecati.

Come potete vedere, caricandolo dopo tutti gli altri CSS esso aggiungerà un bordo ai tag o gli attributi deprecati per spronarvi a correggerli (basterà andare a vedere a il tipo e il colore del bordo a quale parte del CSS appartiene) e scrivere in (X)HTML semanticamente valido.

E' importante usare un browser che rispetti gli standard come Firefox durante l'utilizzo, dato che vengono utilizzati dei selettori avanzati.

I bordi a seconda del colore o dello stile hanno un significato diverso, ovvero:

Stile:
Solid (solido) = Tag deprecato
Dotted (a puntini) = Attributo/i deprecato/i
Colore:
Lime (Verde) = Errore solo se scrivete in XHTML 1.0 Strict
Yellow (Giallo) = Errore minore
Orange (Arancione) = Errore moderatamente severo
Red (Rosso) = Errore severo
Magenta = Errore estremamente severo (che hai combinato? )

[The Captain]

Up.

Inserisco anche quello che uso io, con qualche bugfix, un pò più permissiva (mi sembrava decisamente eccessivo dare alcuni tag come input="submit" come deprecati!) e compressa:

area[alt=""],*[class=""],a[href=""],*[id=""],*[title=""]{border:5px dotted yellow !important;}body[background],table[background],td[background],th[background],input[border],table[border],object[codebase],img[height],object[height],table[height],a[name],form[name],img[name],object[name],a[target],area[target],td[valign],th[valign],img[width],object[width],table[width]{border:5px dotted orange !important;}applet[align],caption[align],div[align],h1[align],h2[align],h3[align],h4[align],h5[align],h6[align],hr[align],iframe[align],img[align],input[align],legend[align],object[align],p[align],table[align],body[alink],applet[alt],applet[archive],body[background],body[bgcolor],td[bgcolor],tr[bgcolor],table[bgcolor],img[border],object[border],br[clear],applet[code],applet[codebase],basefont[color],font[color],dir[compact],dl[compact],menu[compact],ol[compact],ul[compact],basefont[face],font[face],applet[height],td[height],th[height],applet[hspace],img[hspace],object[hspace],script[language],body[link],applet[name],hr[noshade],td[nowrap],th[nowrap],applet[object],isindex[prompt],hr[size],font[size],basefont[size],ol[start],body[text],li[type],ol[type],ul[type],html[version],body[vlink],li[value],applet[vspace],img[vspace],object[vspace],hr[width],td[width],th[width],applet[width],pre[width]{border:5px dotted red !important;}body[bgproperties],*[bordercolor],*[bordercolordark],*[bordercolorlight],body[topmargin],body[rightmargin],body[bottommargin],body[leftmargin],table[frame]{border:5px dotted magenta !important;}span:empty,li:empty,p:empty,td:empty,th:empty{border:5px solid yellow !important;}input[type="button"],input[type="reset"],,tt,big,small{border:5px solid orange !important;}applet,basefont,center,dir,font,isindex,menu,s,strike,u,listing,plaintext,xmp{border:5px solid red !important;}audioscope,bgsound,blink,bq,comment,embed,fn,ilayer,keygen,layer,limittext,marquee,multicol,nobr,noembed,nolayer,nosmartquotes,rt,ruby,server,sidebar,spacer,wbr,xml,blackface,shadow{border:5px solid magenta !important}a[name],applet[name],form[name],frame[name],iframe[name],img[name],map[name]{border:5px dotted lime !important}a>a,pre>img,pre>object,pre>big,pre>small,pre>sub,pre>sup,button>input,button>select,button>textarea,button>label,button>button,button>form,button>fieldset,button>iframe,button>isindex,label>label,form>form{border:5px solid lime !important} 

è importante importare il css non con "link" ma con "@import" e il media (all) che taglia fuori IE6 (che fa solo casino con i selettori):

<style type="text/css">
@import url('deprecated.css') all;
</style>