Rayos-X contra no-estándares
Abril 25, 2008 @ 19:50
CSSLabLa 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 (<a href="#">), imágenes sin definición de atributo alt (<img 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.
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:
La hoja de estilos que hace la detección, contiene lo siguiente:
/* — atributos del <body> obsoletos — */
body[bgcolor], body[background], body[link], body[alink], body[vlink] {
border: 3px dashed red;
}
/* — etiquetas obsoletas desde HTML 4.01 — */
font, center, marquee, b, i, u, strike, menu, basefont, applet {
background: fuchsia;
font-weight: bold;
}
/* — atributos de estilo dentro de etiquetas, obsoletos todos — */
*[align], *[color] {
border: 2px double blue;
}
/* — atributos de estilo para etiquetas comunes — */
div[bgcolor], div[background], table[bgcolor], table[background], td[bgcolor], td[background], th[bgcolor], th[background] {
background: lime;
}
/* — detectando etiquetas vacias — */
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty {
background: yellow;
}
/* — detectando atributo style dentro de cualquier etiqueta — */
*[style] {
border: 1px solid cyan;
}
/* — busca por algun spacer que se haya escapado — */
img[src$="spacer.gif"] {
border: 4px solid fuchsia;
}
/* — busca por atributos alt y title vacios en <img /> — */
img[alt=""], img[title=""] {
border-width: 3px;
}
/* — busca atributo title vacio en <a> — */
a[title=""] {
background: chocolate;
}
/* — busca links de ancla vacio — */
a[href="#"] {
background: lime;
}
/* — busca por links vacios — */
a[href=""] {
background: fuchsia;
}
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]
Articulos relacionados:Rayos, truenos y relámpagos!
Explicación demanda T5 contra Youtube
Los 3 círculos del infierno de los Estándares Web
Más argumentos contra el Plan
Microsoft ataca a la piratería en Guatemala
Permalink
Via CSSLab
Estándares Web, CSS, Html