La idea de una hoja de estilos que muestre evidentemente un marcado HTML deficiente o anticuado no es de nada nueva. Ya Eric Meyer hizo referencia a esfuerzos para desarrollar estilos que diagnosticaran etiquetas o atributos mal utilizados o llanamente obsoletos dentro de una página web. El objetivo es tener un grupo de estilos que puedan ser aplicados durante la fase de desarrollo (o armado) de un sitio web, o durante el análisis para un rediseño.

Elementos tan simples como links vacíos, o que no llevan a ningún lado (), imágenes sin definición de atributo alt () o el mismo uso del atributo style="" dentro de cualquier etiqueta son detectados y mostrados con un estilo que traté de que fuera bastante notorio: bordes gruesos o colores poco comunes de fondo, por ejemplo.

[Ver ejemplo 1][1]{.verejemplo}

En el ejemplo 1, podrán ver (si ven el código fuente) que la estructura de esa página está bastante mal hecha, seguramente por algún software que hace el trabajo fácil. Al aplicar la hoja de estilos rayos-x.css, podrán notar todo lo que hace evidente:

[Ver ejemplo 2][2]{.verejemplo}

La hoja de estilos que hace la detección, contiene lo siguiente:

<span class="commentcss">/* -- atributos del <body> obsoletos -- */</span><br />
     body[bgcolor], body[background], body[link], body[alink], body[vlink] {<br />
     border: 3px dashed red;<br />
}<br />
<span class="commentcss">/* -- etiquetas obsoletas desde HTML 4.01 -- */</span><br />
  font, center, marquee, b, i, u, strike, menu, basefont, applet {<br />
     background: fuchsia;<br />
     font-weight: bold;<br />
  }<br />
<span class="commentcss">/* -- atributos de estilo dentro de etiquetas, obsoletos todos -- */</span><br />
  *[align], *[color] {<br />
     border: 2px double blue;<br />
  }<br />
<span class="commentcss">/* -- atributos de estilo para etiquetas comunes -- */</span><br />
  div[bgcolor], div[background], table[bgcolor], table[background], td[bgcolor], td[background], th[bgcolor], th[background] {<br />
     background: lime;<br />
  }<br />
<span class="commentcss">/* -- detectando etiquetas vacias -- */</span><br />
  div:empty, span:empty, li:empty, p:empty, td:empty, th:empty {<br />
     background: yellow;<br />
  }<br />
<span class="commentcss">/* -- detectando atributo style dentro de cualquier etiqueta -- */</span><br />
  *[style] {<br />
     border: 1px solid cyan;<br />
  }<br />
<span class="commentcss">/* -- busca por algun spacer que se haya escapado -- */</span><br />
  img[src$="spacer.gif"] {<br />
     border: 4px solid fuchsia;<br />
  }<br />
<span class="commentcss">/* -- busca por atributos alt y title vacios en <img /> -- */</span><br />
  img[alt=""], img[title=""] {<br />
     border-width: 3px;<br />
  }<br />
<span class="commentcss">/* -- busca atributo title vacio en <a> -- */</span><br />
  a[title=""] {<br />
     background: chocolate;<br />
  }<br />
<span class="commentcss">/* -- busca links de ancla vacio -- */</span><br />
  a[href="#"] {<br />
     background: lime;<br />
  }<br />
<span class="commentcss">/* -- busca por links vacios -- */</span><br />
  a[href=""] {<br />
     background: fuchsia;<br />
}

Y para utilizarla, sólo deben linkearla a la página que deseen de la siguiente manera:

<link rel="stylesheet" href="rayos-x.css" type="text/css" media="screen" />

[Descargar rayos-x.zip [1kb]][3]

[1]: http://www.csslab.cl/ejemplos/rayos-x/ejemplo1.html “Enlace en CSSLab para “Ver ejemplo 1"” [2]: http://www.csslab.cl/ejemplos/rayos-x/ejemplo2.html “Enlace en CSSLab para “Ver ejemplo 2"” [3]: http://www.csslab.cl/ejemplos/rayos-x/rayos-x.zip “Enlace en CSSLab para “descargar estilo rayos-x.css””