Natuurlijk wil je je bezoekers de mogelijkheid bieden om feedback achter te laten over jouw website. De eenvoudigste manier om dat te doen is door je e-mailadres op je site achter te laten.
Helaas kan dit adres opgepikt worden door spamrobots, waarna je massa's ongewenste post ontvangt in je mailbox. Dit willen we natuurlijk vermijden.

Spamrobots lezen webpagina's niet zoals wij zouden doen. Ze lezen niet de door de browser geïnterpreteerde code, maar speuren de broncode af naar patronen die duiden op e-mailadressen. Dit betekent dat je in je broncode je e-mailadres op een bepaalde manier moet "verbergen". We kunnen het e-mailadres natuurlijk niet doen verdwijnen, maar mits een klein truukje kunnen we het e-mailadres wel onleesbaar maken voor een spamrobot.

Er is niet zoiets als dé oplossing, want ik ontdekte doorheen de jaren verschillende methoden. Ik beschrijf hier 3 mogelijke methoden om je e-mailadres "spamvrij" te houden.

Methode "JavaScript"

De mogelijkheid om JavaScript te gebruiken werd vooral vroeger gekozen toen CSS nog niet zo ingeburgerd en krachtig was zoals nu. Een andere reden die pleit tegen het gebruik van JavaScript is dat je het kunt uitschakelen in je browser en dan ziet de bezoeker niet het gewenste e-mailadres.

De code ziet er als volgt uit:

<script type="text/javascript">
<!--
var toontag="@";
var toonlink="mail ons";
var toonnaam="ilse";
var toonhost="gmail.com";
document.write("<a href="/+"mail"+"
to:"+toonnaam+toontag+toonhost+">
"+toonlink+"</a>")
//-->
</script>

De volgende 2 mogelijkheden doen een beroep op de kracht van CSS.

Methode "CSS - 1"

Een eerste methode maakt gebruik van het CSS-kenmerk direction. We stellen dit kenmerk in op rtl (right to left, ofwel rechts naar links) zodat woorden in de omgekeerde richting worden gelezen.

De CSS ziet er als volgt uit:

.spamvrij {
direction: rtl;
unicode-bidi: bidi-override;
}

Het e-mailadres dat je wilt weergeven, plaats je tussen span.spamvrij en typ je omgekeerd in. Je HTML-code ziet er dan als volgt uit:

<span class="spamvrij">
eb.ngisedbewdvw@retsambew</span>

Deze methode vond ik in de broncode van de website mastercode.nl.

Methode "CSS - 2"

Met behulp van een pseudo-class genaamd :after kunnen we een beveiligd gedeelte plaatsen achter een ander element. Je HTML-code ziet er als volgt uit:

<address>Tormod Rangnes</address>

De CSS ziet er dan als volgt uit:

address:after {
   content: " - bzabza\40gmail.com;
}

\40 is de entiteit voor @ en in je browser wordt de tekst nu als volgt weergegeven:

Tormod Rangnes - bzabza@gmail.com

Deze methode vond ik op de website http://www.phoenity.com/newtedge/.

Opgelet

Bij het testen merkte ik wel dat deze methode niet werkt in Internet Explorer 6. Bij alle andere recente browsers gaf deze methode echter geen problemen.