Quando publicamos um endereço de correio em uma página web devemos saber que não demorará muito para ser rastreado e incorporado a banco de dados de e-mails para fazer spam. É uma autêntica chatice ter que receber dezenas ou centenas de mensagens lixo no fim do dia ou de uma semana, por isso vale a pena colocar em funcionamento algum mecanismo para evitar que os spambots (robôs em busca de endereços de e-mail) cacem nosso correio eletrônico.

Agora vamos mostrar um mecanismo que encontramos em uma página web. Na verdade, este artigo é uma tradução livre deste outro artigo em inglês: Hiding email address from spambots, escrito por Lim Chee Aun.

Mostraremos um código que serviria para mostrar por CSS o endereço de correio eletrônico. O e-mail aparece na folha de estilos, nunca no corpo da página, assim o spambot o terá muito difícil para obter nosso correio.

Trata-se de utilizar umas características avançadas das folhas de estilo em cascata, que permitem definir certo conteúdo, neste caso um endereço de correio eletrônico, para colocar antes ou depois de um texto.

Teoricamente vamos utilizar CSS2 (Folhas de estilo em cascata especificação 2), que inclui a definição de pseudo-elements (pseudo elementos) "before" e "after", que servem para inserir conteúdos antes e depois de certos elementos.

Neste caso, vamos definir com CSS 2 a inclusão de um conteúdo depois de uma etiqueta HTML, mais especificamente da etiqueta <ADDRESS>, que serve à princípio para escrever um endereço em uma página.

Nota: Conhecemos o pseudo-element em uma artigo do manual de CSS: Pseudo-element em CSS

O código CSS seria o seguinte:

address:after{
/* \40 é um código para escrever o caractere '@' */
content: " <nome\40 dominio.com>";
}

Nota: O caractere @ em folhas de estilo em cascata pode ser escrito com o código especial \40. Colocamos um espaço depois de \40 para que fique claro que o caractere especial chega até ali. Podem provar ao tirar o espaço e vocês verão que em ocasiões o @ se transforma em outro caractere, dependendo do que tiver escrito depois. Esse espaço em branco não afeta o texto, ou seja, não será visto na página.

O código HTML que deveríamos escrever para mostrar o endereço do correio seria o seguinte:

<address>© 2005 oquefor.com</address>

Como pode ser visto, no código HTML não aparece o endereço do correio eletrônico em nenhuma parte, fazendo com que o spambot não perceba que ali existe um correio.

Pode-se ver o exemplo em uma página a parte.

Atenção aos usuários do Internet Explorer 6. Este navegador não suporta os pseudo-elementos after ou before, portanto este exemplo não funcionará.

Em nosso exemplo incorporamos a declaração de estilos no mesmo arquivo HTML, mas talvez seria mais efetivo se colocássemos a declaração de estilos em um arquivo externo, que logo incluiríamos com a etiqueta no cabeçalho da página.

Conclusão

Vimos uma maneira engenhosa de ocultar o endereço de e-mail. Entretanto, cabe destacar que as características avançadas de CSS2 não são suportadas por todos os navegadores.

Em geral, a desvantagem a destacar é que, com este código, a acessibilidade da página diminui consideravelmente. Visto que somente certos navegadores mostrarão o endereço eletrônico. Mesmo assim, esses endereços não poderão ser clicados para enviar um correio eletrônico diretamente, ou seja, não podem ser mostrados como links. Em Firefox, nem sequer podemos selecionar o texto do endereço de correio, simplesmente nos permite vê-lo.

No obstante, é uma nova maneira de mostrar um correio eletrônico não acessível a programas de rastreio de e-mails. Hoje ainda não é uma maneira muito adequada, mas talvez o será com o tempo.

Lembramos que este artigo é uma tradução de outro, escrito em inglês e publicado na URL: http://www.phoenity.com/newtedge/hide_email_spambots/