Une CSS pour vérifier le code HTML

12 sept 2007

Technique

le 12.09.2007 à 11:37

1440 lectures

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

Version Texte

CSS:

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

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

Puis le code CSS suivant pour les images

Version Texte

CSS:

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;}

Vous aurez le résultat suivant

Toutes les images ont une bordure rouge de 5px
Toutes les images qui possèdent les attributs alt et title renseignés, la bordure est enlevée
Si une image possède juste l'attribut alt, la bordure est fuchsia
Si il manque un des attributs alt ou title, la bordure sera doublée
Tant que l'image aura un des deux attributs renseigné et l'autre vide, elle sera entourée d'un bordure de 3px
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.

Si vous avez trouvé cet article intéressant, abonnez-vous gratuitement au flux RSS d'eclaireur ou bien par email.