Diagnostic HTML et CSS avec jQuery

Il y a quelques mois, Eric Meyer publiait un article qui nous montrait comment facilement créer des styles pour diagnostiquer une page, avant une mise en ligne par exemple.

Lorsque j’intègre un site et qu’il y a des liens dont la destination n’est pas encore fixée (vers des fichiers PDF qui tardent à arriver, par exemple) j’utilise ce code:

<a href="#@@@">Guide d'utilisation</a>

Ce qui me permet de faire une recherche dans plusieurs fichiers différents en cherchant « #@@@ » pour trouver les liens vides.

Cependant, je cherchais une manière de faire ressortir ces liens lorsqu’on navigue dans le site, question de les spotter rapidement. Quoi de mieux que d’utiliser jQuery pour faire tout cela?

$('a[@href^=\#\@\@\@]').after(
    "<span class=\"lien_vide\">◄ ce lien ne pointe nulle part!</span>"
);

On trouve d’abord tout les liens dont l’attribut HREF commence par #@@@ et à la suite, on ajoute un span contenant un joli message indiquant que lien pointe nulle part.

On pourrait procéder de la même manière pour identifier toutes les images qui ne possèdent pas d’attribut ALT (en se basant sur la technique de Meyer) :

$('img')
.css("outline", "5px solid red")
.filter("img[alt]")
.css("outline", "none");

On trouve toutes les images, on leur applique un outline, ensuite on filtre uniquement celles qui possèdent un attribut ALT et on leur enlève cet outline.

Pratique, non?