Dicas para aplicar CSS em e-mail

Quando utilizamos CSS em arquivo HTML que será visualizado via browser precisamos lidar com algumas restrições, evitar algumas propriedades CSS que não são suportadas ou que tenham diferenças de render entre browsers, ou seja, o uso de CSS e o suporte aos padrões é diferente entre browsers e ambientes, e o assunto é ainda mais complicado quando é sobre softwares “Leitores de e-mail” .

Precisamos gerar e-mail para várias finalidades, como newsletter, campanha de marketing e mensagens de sistema, e para isso podemos podemos usar os formatos de arquivo TXT e HTML, e no caso utilizar CSS temos que evitar algumas propriedades, pois os leitores de email retiram propriedades que possam comprometer a sua segurança.

Como as propriedades position e float, que seguem a seguinte lógica, imagine lendo um mail via browser(gmail,yahoo) e você recebe um mensagem que através de CSS posiciona um link invisível sobre o logo da aplicação (gmail…) e este link redireciona para um outro site !!

Então evite layout com colunas, por que não é possível alterar o fluxo do conteúdo com POSITION e FLOAT, prefiro evitar ao invés de utilizar tabelas.

Uma outra restrição é que o leitor apenas interpreta STYLE IN-LINE, o leitor de e-mail remove qualquer tag que inclua arquivos externos, como o elemento STYLE e LINK, e qualquer classe, id e seletor CSS que houver em sua mensagem.

Ex: Este trecho é removido em muitos leitores de e-mail

<style>
  #logo{text-align:center}
</style>
<link href="http://site.com/newsletter.css"
      type="text/css" rel="stylesheet" />
  #logo{text-align:center}
  .teste{color:red}
  p{font-size:2em}
</link>

Já isso é permitido pela maioria

<h1 style="text-align:center">
  Logo
</h1>
<span style="color:red">
  Alerta
</span>
<p> style="font-size:2em">
  Loren Lipsun
</p>

Então conclusão,

  • não utilize CSS externo
  • não coloque seu CSS no cabeçalho da pagina
  • utilize style in-line diretamente nas tags HTML.

Segue alguns links com mais informações sobre o assunto
http://del.icio.us/marco.moura/css-email

Anúncios

2 Respostas para “Dicas para aplicar CSS em e-mail

  1. Pingback: domelhor.net

  2. Os browser estão evoluindo no que se refere a css e a web 2.0 mas os leitores de e-mails não se preocupam com isso, ainda acho que a forma mais eficas de fazer os e-mail é utilizando tabelas.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s