28.12.2008

E-Mail-Adressen mit CSS verbergen

Wer auf seiner Website seine Mail-Adresse veröffentlicht wird bald feststellen, dass die Spam-Mails in seinem Postfach zunehmen. Mitunter wird deshalb empfohlen, die Mail-Adresse mittels CSS-Angaben zu verbergen. Ob dies Sinn macht, soll hier anahand zweier gängigen Methoden ermittelt werden (Hinweis: Die in den Beispielen verwendete Mail-Adresse existiert nicht).

1. Mail-Adresse durch Schreibrichtung verbergen

Mit der Eigenschaft "unicode-bidi" kann zusammen mit der Schreibrichtung "direction" die Richtung des Textflusses beeinflusst werden. Durch folgenden CSS-Code kann eine Mail-Adresse "rückwärts" eingegeben werden und wird dennoch richtig dargestellt. Geht man davon aus, dass die Bots den Quelltext (noch) richtig von links nach rechts lesen, so ergibt die im Quelltext dargestellte Mail-Adresse keinen Sinn und bei Verwendung wird die E-Mail nicht zustellbar sein.
Wir definieren eine Klasse, z.B. ".rtl" (wie "von rechts nach links"):

.rtl {
unicode-bidi: bidi-override;
direction: rtl;
text-align: left;
font-weight: bold; }

Beim HTML-Code müssen wir aufpassen, dass wir richtig "rückwärts" schreiben. Die Mail-Adresse rufen wir per <span> auf:

<span class="rtl">ten.rag-stheg@liamofni</span>

Dargestellt wird dieser CSS-formatierte Code wie folgt:

ten.rag-stheg@liamofni

So beeindruckend das Ergebnis auch aussieht, so hat diese Lösung im Wesentlichen drei Nachteile:
Sie funktioniert nicht in älteren Browsern, welche die genannte CSS-Eigenschaft nicht unterstützen.
Der "mailto-Link", mit dem ein installiertes Mail-Programm geöffnet wird, kann auf diese Weise nicht dargestellt werden.
Kopiert man die dargestellte Adresse in ein Mail-Programm wie z.B. Outlook oder Webmail, so wird sie "rückwärts" ins Adressfeld eingetragen. Die Mail wird ihren gewünschten Adressaten folglich nicht erreichen. Und das will wohl niemand seinen Besuchern zumuten. Alternativ müsste zusätzlich ein Hinweis angebracht werden, dass die Adresse nicht kopiert werden kann, sondern "manuell" ins Adressfeld eingetragen werden muss.
Insgesamt ist dies somit also eine wenig praktikable Lösung.

2. Unsichtbaren Text einbauen

Eine weitere Methode, die eigentliche Mail-Adresse zu verbergen, ist zusätzlichen, nicht sichtbaren Code einzubauen. Dies kann durch die Eigenschaft "display: none" erfolgen, hier als Styleangabe direkt im HTML-Quelltext eingebunden:

infoma<span style="display:none;">gehört nicht dazu</span>il@gehts-gar.net

Darstellung: infomagehört nicht dazuil@gehts-gar.net

Allerdings gelten auch hier die oben genannten Nachteile: Der "mailto-Link" lässt sich auf diese Weise nicht sicher einbinden und die kopierte Adresse wird im Adressfeld des Mail-Programms falsch wiedergegeben.

Fazit:

Mit CSS ist es durchaus möglich, Mail-Adressen "verschleiert" darzustellen. Allerdings werden die auf diese Weise formatierten Adressen beim Kopieren falsch in das Adressfeld des Mail-Programms eingefügt. Darunter leidet die Benutzerfreundlichkeit einer Website.
Aus den dargelegten Gründen verwende ich persönlich die CSS-Methoden zur Verbergung von Mail-Adressen und somit als Spamschutz nicht.
Eine Alternative ist Hide-My-Address. Mit diesem Programm wird ein kleines Javascript generiert, welches statt der Klartext-Adresse eingebaut werden kann. Nachteil: Der Benutzer muss in seinem Browser Javascript aktiviert haben. Darauf sollte hingewiesen werden.

nach oben