Rayos-X contra no-estándares

25/Abr/2008 156

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. pharmacepticacom [#]

    side effects of tadalafil https://www.pharmaceptica.com/

  2. side effects of accutane [#]

    isotretinoin side effects accutane for acne

  3. modafinilalcohol [#]

    modafinil mechanism of action provigil pill

  4. bactrim dosage [#]

    what does sulfameth trimethoprim treat sulfamethoxazole for uti

  5. pharmacepticacom [#]

    hydro chloroquine https://www.pharmaceptica.com/

  6. prednisonenorx [#]

    cheap prednisolone does prednisone make you sleepy

CSSLab