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

Usuarios que han visto este tema también han visto...

- Celdas con puntas redondeadas utilizando CSS
- Optimizar el CSS sin usar PHP
- Estilo de la primera letra con CSS
- Aproximación al problema del color: imagen vs CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento