ti-enxame.com

Estilo de email HTML para o Gmail

Estou gerando um e-mail html que usa uma folha de estilo interna, por exemplo.

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

Quando visualizado no Gmail, parece que todos os estilos na folha de estilo interna são ignorados. Parece que o Gmail ignora todos os estilos além das regras inline, por exemplo.

 <h2 style="color: red">Email content here</foo>

Esta é minha única opção para estilizar e-mails HTML quando visualizados com o Gmail?

83
Dónal

Use estilos inline para tudo. Este site irá converter suas classes para estilos inline: http://premailer.dialect.ca/

61
substate

O Gmail iniciou o suporte básico para tags de estilo na área principal. Não encontrou nada oficial ainda, mas você pode facilmente tentar você mesmo.
Parece ignorar os seletores de classe e ID, mas os seletores de elementos básicos funcionam.

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

ele criará uma tag de estilo em sua própria área de cabeça limitada ao div que contém o corpo do email

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>
11
fuchs777

As respostas aqui estão desatualizadas, a partir de 30 de setembro de 2016. No momento, o Gmail está há suporte para para a tag style na head, além de consultas de mídia. Se o Gmail é sua única preocupação, você pode usar classes como um desenvolvedor moderno!

Para referência, você pode verificar os documentos oficiais do gmail CSS.

Como uma observação, o Gmail foi o único grande cliente que não ofereceu suporte a style ( reference , até que ele seja atualizado de qualquer maneira). Isso significa que você pode quase parar com segurança de colocar estilos inline. Alguns dos clientes mais obscuros ainda podem precisar deles. 

11
Matthew Johnson

Observe que os serviços e as ferramentas de envio de e-mails podem inserir seu CSS para você, permitindo que o CSS nas tags <style> funcione no Gmail.

Por exemplo, se você estiver enviando e-mails com o MailChimp, seu CSS das tags <style> será automaticamente alinhado por padrão. Com o Mandrill, você pode ativar essa funcionalidade (embora esteja desativada por padrão por motivos de desempenho ) marcando a caixa "Estilos CSS embutidos em e-mails HTML" na seção "Padrões de envio" da guia Configurações:

Image showing how to do this in Mandrill

2
Mark Amery

Eu concordo com todos que suportam classes e estilos inline. Você pode ter aprendido isso agora, mas se houver um único erro na sua folha de estilos, o Gmail a desconsiderará.

Você pode pensar que seu CSS é perfeito, porque você fez isso com tanta frequência, por que eu teria erros no meu CSS? Execute-o através do CSS Validator (por exemplo http://www.css-validator.org/ ) e veja o que acontece. Eu fiz isso depois de encontrar alguns problemas de exibição do Gmail e, para minha surpresa, várias declarações de estilo específicas do Microsoft Outlook apareceram como erros.

O que fez sentido para mim, então eu os removi da folha de estilo e os coloquei em um bloco de código only for Microsoft, assim:

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

Este é apenas um exemplo simples, mas, quem sabe, pode ser útil algum tempo.

1
Shawn Spencer

Como outros já disseram, alguns programas de email não irão ler os estilos CSS. Se você já possui um e-mail na Web, pode usar a seguinte ferramenta de zurb para inline em todos os seus estilos:

http://zurb.com/ink/inliner.php

Isso é extremamente útil ao usar modelos como os mencionados acima em mailchimp, monitor de campanha, etc., pois eles, como você descobriu, não funcionarão em alguns programas de email. Essa ferramenta deixa sua seção de estilo para os programas de email que irão lê-lo e coloca todos os estilos em linha para obter mais legibilidade universal no formato desejado.

0
Chad Dupuis