Florian octo Forster's Homepage

Obfuscate email addresses with CSS

That displaying one's email address on a webpage is a bad idea is known by anybody who just noticed that spammers found yet another way to get around some spam-filtering method. However, you can't simply ban email addresses from the web. Therefore some method to obfuscate the email address is needed.

Many people simply replace the at-sign with the written-out word "at", which looks mostly like this: username at domain.org Other insert some nonsense in the email address, which may look like this: username@REMOVEMEdomain.org

While both these methods work (at least for now), there is a more robot-proof and elegant method: Using CSS.. Once you get the idea it's trivial to vary it a bit making it even more difficult for robots to recognise that string as a email address. At the same time, even the stone-old browsers "MSIE" can render it just fine and browsers which lack CSS support at all will basically fall back to the second method mentioned above.

First, you enclose you email address with span-tags of the class "email": <span class="email">username@domain.org</span> The email-class may, but does not need to, format the address in any way you wish. After that, you add another pair of spans with enclosed tag, so that your address looks like this: <span class="email">username@<span>removeme.</span>domain.org</span> Now you add, in any appropriate way, the following CSS rule: span.email span { display: none; } That will keep the "removeme." part from being displayed. If, however, for whatever reason the text gets displayed, the user hopefulle knows what to do. Robots, on the other hand, will not recognise this as an email address. Even if spambots would remove HTML-tags they would still end up with an address which doesn't exist. The only way to get around this would be to implement a full-blown CSS implementation, which is unlikely to happen. So, unless some spammer gets the idea to write a Mozilla/Firefox plugin which checks for a tags visibility we should be save..

For a real-live example of this method read the source of this very page..

One last thing: As you propably would habe guessed: Links which use the "mailto:"-pseudo-protocol are off-limits. People who never had any correspondence with you will have to type your address or use some kind of copy'n'paste.