Depurar errores en nuestras páginas web con CSS

Escrito por J.F. el Wednesday, 12 de September del 2007 a las 10:34

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:

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

Versión avanzada:

TEXTO PLANO

CSS:

1. table#imgtest th,
2. table#imgtest td {text-align: center; padding: 5px;}
3. table#imgtest tbody th {text-align: right;}
4. table#imgtest img {width: 25px; height: 25px;}
5. div:empty, span:empty, li:empty, p:empty,
6. td:empty, th:empty {padding: 0.5em; background: yellow;}
7. *[style], img, a[href], font, center {outline: 5px solid red;}
8. table, th {border: 5px solid red;}
9. img[alt][title] {outline-width: 0;}
10. img[alt] {outline-color: fuchsia;}
11. img[alt], img[title] {outline-style: double;}
12. img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
13. img[alt=""][title=""] {outline-style: dotted;}
14. table[summary], th[scope="col"],
15. th[scope="row"] {border: 1px solid #AAA;}
16. a[title] {outline-width: 0;}
17. a[title=""] {outline-width: 3px;} a[href="#"] {background: lime;}
18. a[href=""] {background: fuchsia;}
19. li {margin: 0.67em 0;}

Puedes ver una demo de ésta última en la página del autor.

Escribir comentario

Categoria: CSS,Recursos

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Deja un comentario

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>