La dernière fois je vous avais montré une technique anti spam en CSS basée sur les pseudo-éléments ::before et ::after afin de tromper les robots, et bien cette fois je vais vous montrer deux autres techniques, l'une basée sur la propriété unicode-bidi qui permet la manipulation de texte bidirectionnel, et l'autre sur la propriété display qui permet de ne pas afficher un élément, mais il existe et c'est la l'astuce.
Avec la propriété unicode-bidi
<style>
span.antispam {unicode-bidi: bidi-override;direction: rtl;}
</style>
<span class="antispam">moc.liamg@liamnom</span>
Tout simple mais infaillible, vous écrivez votre adresse à l'envers dans le code source et grâce à la propriété unicode-bidi vous la remettez à l'endroit à l'écran, ainsi les robots eux ne verront que votre adresse e-mail à l'envers.
Avec la propriété display
La deuxième technique est basée sur la propriété display, en effet avec cette propriété il est possible d'avoir un élément écrit dans le code source mais pas visible à l'écran.
<style>
span.cacher{ display:none; }
</style>
<p>monmail@<span class="cacher">ljlj</span>gmail.com</p>
De cette façon les robots ne verront que votre adresse mail dans le code, qui bien sur contient des caractères bidons, mais ces caractères ne seront pas visibles à l'écran !
et au niveau de l'accessibilité ça se passe comment ? est-ce que les lecteurs d'écran arrivent à afficher l'email correctement ?
RépondreSupprimer