Rayos-X contra no-estándares

25/abr/2008 8

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 (<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.

Ver ejemplo 1

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

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]

Comentarios

  1. ViB [#]

    Excelente!!!!!!! Gran, gran, gran aporte. Desde acá un GRACIAS gigante

  2. pacotole [#]

    No sabía que el fondo en el body estaba obsoleto.

    ¿Me podéis dar alguna explicación o pasar alguna referencia sobre este tema? Gracias.

    Por lo demás muy interesante hoja de estilos.

  3. Mañungo [#]

    También sirve <a href=”javascript:(document.getElementsByTagName(‘head’))[0].innerHTML =”;return void(0);”>agregarlo por javascript a la página 😛

    Por si no sale:

    javascript:(document.getElementsByTagName(‘head’))[0].innerHTML =”;return void(0);

  4. Daniel G. Blázquez [#]

    Gran trabajo.
    ¡Ojo! El elemento “align” no está desaprobado en algunos elementos relacionados con tablas. 😕

  5. Jorge Epuñan [#]

    Pacolote: echale una leida a ¿HTML 4.0 o XHTML 1.1? para mas detalles. Daniel Blázquez: cuales serian esoss elementos de tablas en los cuales align no está desaprobado? El atributo en si esta obsoleto, donde sea su uso.

  6. Daniel G. Blázquez [#]

    En la especificación no pone que este atributo esté desaprobado (aparece en elementos como TD, COL, TR, TH). Aunque sí que lo pone en etiquetas como CAPTION o TABLE.

    Seguramente porque no hay alternativa al valor “char” en CSS. Tampoco el atributo valign aparece como “desaprobado”.

    Otro motivo puede deberse a que los datos tabulados requieren de estos atributos para ser mostrados. No es sólo una cuestión estética, si no que forman parte intrinseca del contenido (por ej. los números en una hoja de calculo siempre se alinean a la derecha). Aunque no estoy del todo seguro de esto último.

  7. Daniel G. Blázquez [#]

    con el atributo valign también pasa :-O

  8. fearlex [#]

    Muy buenisisisisisisio aporte, esto me facilita mucho las cosas a partir de ahora. 😀

    Gracias

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab