Resaltar con CSS código HTML obsoleto o "deprecated"

0 COMENTARIOS  -  12/05/2009 -  Clasificado en: ,

En la entrada anterior se vio cómo hacer uso de las fuentes que lleva incorporado GD. Pero también podemos utilizar otras fuentes TrueType. En este ejemplo se utiliza la fuente District:

En Neal Grosskopf he encontrado una muy útil e interesante técnica para detectar el uso de elementos vacíos y/o obsoletos en nuestro código HTML. Mediante CSS resaltaremos en diversos colores, dependiendo de la "gravedad", elementos obsoletos o vacíos.

/* ELEMENTOS OBSOLETOS */
applet, basefont, center, dir, font, isindex, menu, s, strike, u, marquee, blink, acronym /* html 5, use abbr */
{ border: 5px solid red !important; }
/* ATRIBUTOS OBSOLETOS */
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; }


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


/* ATRIBUTOS PROPUESTOS COMO OBSOLETOS */
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; }


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


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

Vía Neal Grosskopf » »

Si te ha gustado, puedes compartir este post en...
Posts Relacionados
También te puede interesar...
Deja un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com