Contenido

Usa CSS para analizar tu HTML

6 feb

+ 10

Muchas son las herramientas que nos ayudan a analizar nuestro código con el fin de mejorar la cálidad del mismo y asegurarnos de seguir unos estándares básicos en nuestas aplicaciones web. Pero usar CSS es sin duda la más clara y visualmente cómoda de las que existen.

En NealGrosskopf.com han recopilado una serie de códigos CSS que nos mostrarán los elementos que no cumplan con estos estándares:

Elementos con atributos vacios

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

Atributos propuestos para ser “deprecated”

body[background], table[background], td[background], th[background],
input[border], table[border]
table[cellpadding],
table[cellspacing],
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; }

Atributos “deprecated”

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

Atributos que no forman parte de la W3C

body[bgproperties],
*[bordercolor], *[bordercolordark], *[bordercolorlight],
body[topmargin], body[rightmargin], body[bottommargin], body[leftmargin],
table[frame]
{ border: 5px dotted magenta !important; }

Elementos vacios

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

Elementos propuestos para ser “deprecated”

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

Elementos “deprecated”

applet, basefont, center, dir, font, isindex, menu, s, strike, u,
listing, plaintext, xmp
{ border: 5px solid red !important; }

Elementos ajenos a la W3C

audioscope, bgsound, blink, bq, comment, embed, fn, ilayer, /*image,*/ keygen, layer, limittext, marquee, multicol, nobr, noembed, nolayer, nosmartquotes, rt, ruby, server, sidebar, spacer, wbr, xml, blackface, shadow
{ border: 5px solid magenta !important }

Atributos “deprecated” en el XHTML 1.0 Strict

a[name], applet[name], form[name], frame[name], iframe[name], img[name], map[name]
{ border: 5px dotted lime !important }

Prohibiciones del XHTML 1.0 Strict

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 }

Si te ha gustado, puedes seguir el proyecto en Google Code

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.