Une CSS pour vérifier le code HTML

Ce matin je suis tombé sur une idée de Eric de meyerweb.com : Faire des CSS pour diagnostiquer d'éventuelles erreurs dans le code HTML. Attention cela ne remplacera pas les extensions Firefox pour contrôler le code HTML comme Web Developer, Firefbug ou encore HTML validator. Mais cela peut rendre quelques services, voici le principe :

En insérant ce code CSS propre aux liens

CSS:

1. a[href="#"] {background: lime;}
2. a[href=""] {background: fuchsia;}

Si vous avez des liens vide ou pointant "#" comme cible, ceux-ci seront surlignés respectivement en fushia ou vert.

Puis le code CSS suivant pour les images

CSS:

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

Vous aurez le résultat suivant

1. Toutes les images ont une bordure rouge de 5px
2. Toutes les images qui possèdent les attributs alt et title renseignés, la bordure est enlevée
3. Si une image possède juste l'attribut alt, la bordure est fuchsia
4. Si il manque un des attributs alt ou title, la bordure sera doublée
5. Tant que l'image aura un des deux attributs renseigné et l'autre vide, elle sera entourée d'un bordure de 3px
6. Enfin si une image possède les attributs alt et title vides, alors la bordure est en pointillés

Pour vous faire une meilleure idée, voici la page de démonstration. Je trouve l'idée intéressante pour corriger à la volée d'éventuelles erreurs laissées sur un site.