El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Una hoja de estilo para diagnosticar fallos en el marcado

De la mano de Eric Meyer nos llega una solución que, por simple, es sin duda un gran hayazgo.
Haciendo un uso magistral de los selectores de CSS, va filtrando situaciones comunes en cualquier sitio (imagenes sin alt, enlaces que no van a ningún sitio…), haciéndolas mucho más fáciles de localizar.

La hoja de estilo queda algo así (por supuesto, adáptala a tus necesidades)


a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}

Sin duda, la Web Developer Toolbar ya nos sirve para esto pero, de esta manera, recibimos referencias visuales más concretas (sabremos de un vistazo qué está mal y por qué).

Para profundizar en la lógica de esta hoja de estilo nada mejor que leer el artículo de Eric: Diagnostic Styling

(x)HTML, CSS

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

3 Respuestas a “Una hoja de estilo para diagnosticar fallos en el marcado”

Agrega tu comentario

  1. Arzakon dice:

    Comentar que en el mismo blog, el autor linka a una página de pruebas con una hoja de estilos mas completa. Esta.
    Voy a probar ahora mismo este sistema con un par de pàginas qeu tengo en el tintero ;-P

Trackbacks/Pingbacks

  1. webeame.net dice:

    Una hoja de estilo para diagnosticar fallos en el marcado…

    De la mano de Eric Meyer nos llega una solución que, por simple, es sin duda un gran hayazgo. Haciendo un uso magistral de los selectores de CSS, va filtrando situaciones comunes en cualquier sitio (imagenes sin alt, enlaces que no van a ningún sitio…

  2. [...] Vía WebmasterLibre, me encuentro con una hoja de estilos CSS con eficaz uso de selectores que nos sirve para depurar algún fallo en el código de nuestras páginas web. Sin duda una gran ayuda, ya que podremos localizar de forma fácil y rápida imágenes sin atributo alt o title, enlaces vacíos que no llevan a ninguna parte, etc. Hay 2 hojas diferentes, una más simple y otra más detallada. Puedes adaptarla a tus necesidades, y sin duda es un recurso magnífico para depurar errores y validar nuetra página según los estándares. Aquí tienes el código de las 2 hojas de estilo CSS: Versión simple: TEXTO PLANO CSS: [...]

Feed RSS de los comentarios de este post.

Deja tu comentario

Por favor, procura que tus comentarios aporten algo al tema del artículo. Los comentarios ofensivos y el spam serán eliminados.

Si tu comentario no aparece al momento puede que esté en la cola de moderación o en Akismet, lo reviso cada día pero si ves que pasa un tiempo prudencial y no aparece dímelo

Este post tiene más de un año. Puedes dejar un comentario de todas formas y volver más tarde para comprobar si hay novedades sobre el tema.

Información:

Webmaster Libre es un blog de Alma Fernández