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.