Mettez en exergue des erreurs HTML grâce à CSS

Eric Meyer parle, dans un de ses derniers billets, d'une solution pour réaliser un diagnostic rapide de son code HTML afin de trouver des erreurs éventuels. La technique n'est certe pas au point et demande à être complétée mais elle semble prometteuse. Pensez à vous munir d'un navigateur "standards friendly" car les sélecteurs seront mis à dure épreuve.

Exemple 1

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

Dans cet exemple, les liens ancres seront surlignés en jaune et les liens vide en fuchsia.

Exemple 2

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

Cette définition de styles traite le cas des attributs alt et title des images :

1. Met une bordure rouge de 5px à toutes les images
2. Enlève la bordure lorsque l'image a les attributs alt et title bien renseignés.
3. Met une bordure de 5px fuchsia lorsque l'image possède juste l'attribut alt. Une image qui n'aurait pas cet attribut restera rouge.
4. Double la bordure lorsqu'il manque soit l'un ou l'autre des attributs (alt, title)
5. Si seulement un des attributs est renseigné, la bordure sera de 3px
6. Si les attributs sont vides en même temps, alors la bordure sera en pointillés.

C'est une technique qui peut se révéler utile, il faudra voir avec l'usage. En attendant de voir une feuille de styles plus complète, vous pouvez déjà voir les contributions en commentaire du billet chez Eric Meyer.

Ah j'oubliais, voici la page de démonstration.

Commentaires

[#1] Commentaire rédigé le Mercredi 12 Septembre 2007 à 18:57 par Luc

Plutot pas mal pour tester l'accessibilité d'un site les images...
je vais tester ca dans les prochains temps

---

[#2] Commentaire rédigé le Jeudi 13 Septembre 2007 à 01:29 par Loïc

oui dans le principe je suis d'accord, toutefois en production est ce que c'est jouable... J'ai peur que l'on augmente le temps de prod...

---

[#3] Commentaire rédigé le Jeudi 13 Septembre 2007 à 01:32 par br1o

Ca a l'air pas mal, mais j'imagine qu'il vaut mieux faire plusieurs passages parce que tout faire d'un coup c'est "sapin de noel" 24/7 ^_^v

---

[#4] Commentaire rédigé le Jeudi 13 Septembre 2007 à 03:21 par neolao

on peut utiliser une fonctionnalité du plugin webdeveloper en ajoutant une CSS perso depuis le disque


sinon, pour certains trucs, le plugin tidy est bien

---

[#5] Commentaire rédigé le Jeudi 13 Septembre 2007 à 08:54 par loïc m.

ça peut servir en effet, mais comme l'a souligné br1o, à consommer avec modération pour ne pas avoir mal aux yeux
Et comme l'a dit neolao, web developper peut servir pour ajouter ponctuellement une css de test.

---

[#6] Commentaire rédigé le Jeudi 13 Septembre 2007 à 09:05 par Thanh

D'un coté les geeks que vous êtes n'en avez pas besoin

---

[#7] Commentaire rédigé le Dimanche 16 Septembre 2007 à 15:53 par Joris

Excellente manière, fallait y penser !

---

Trackbacks

Pisteurs vers ce billet (trackbacks entrant)

Il n'y a pas encore de pisteurs pour ce billet.

Pistés par ce billet (trackbacks sortant)

Il n'y a pas encore de pisteurs effectué par ce billet.