Masquer une adresse email dans une page web… en CSS.

Vendredi 16 avril 2010

Je ne reviendrais pas sur l'utilité de masquer son adresse E-Mail dans une page web, mais voici simplement une technique supplémentaire pour la rendre visible sans risquer de se faire spammer.

Divers méthodes existent (chiffrement, utiliser une image, ou concaténer l'adresse en JS…). La méthode suivante est en CSS, je n'ai trouvé aucun site qui en parlait. Elle est compatible avec tous les navigateurs + IE8.

Il s'agit d'utiliser les pseudo classes :after et :before, ainsi que de la propriété content. C'est tout bête :

Code HTML :

Code CSS :

span.mail:before {
     content: "timovneerden";
     }
span.mail:after {
     content: "gmail.com";
     }

Vous l'aurez compris, on aura le “@” avec l'adresse devant et le nom de domaine derrière :-)

Reste plus qu'à tester son efficacité, mais vue que l'E-Mail est découpé et que les morceaux sont dans des fichiers différents, je pense que c'est une solution sure.
Les autres techniques de masquage d'adresse E-Mail en CSS sont dans la page dédiée.