Estou gerando um e-mail html que usa uma folha de estilo interna, ou seja,
<!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 da folha de estilo interna são ignorados. Parece que o Gmail ignora todos os estilos, exceto as regras embutidas, por exemplo
<h2 style="color: red">Email content here</foo>Esta é minha única opção para estilizar e-mails em HTML quando visualizados no Gmail?
html
css
gmail
html-email
Dónal
fonte
fonte
<html>tag de abertura ;)Respostas:
As respostas aqui estão desatualizadas, a partir de hoje, 30 de setembro de 2016. O Gmail está atualmente implementando suporte para a
styletag nohead, bem como consultas de mídia. Se o Gmail é sua única preocupação, você pode usar as aulas com segurança como um desenvolvedor moderno!Para referência, você pode verificar os documentos CSS oficiais do gmail .
Como observação lateral, o Gmail era o único cliente importante que não era compatível
style( referência , até que eles atualizem de qualquer maneira). Isso significa que você pode parar de colocar estilos embutidos quase com segurança. Alguns dos clientes mais obscuros ainda podem precisar deles.fonte
bodymarca em vez daheadmarca.Use estilos embutidos para tudo. Este site converterá suas classes em estilos embutidos: http://premailer.dialect.ca/
fonte
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 por si mesmo.
Parece ignorar os seletores de classe e id, mas os seletores de elemento básico funcionam.
irácriar uma etiqueta de estilo na sua própria área principal limitada ao div que contém o corpo da mensagem
fonte
Eu concordo com todos que apoiam classes E estilos inline. Você pode ter aprendido isso agora, mas se houver um único erro em sua folha de estilos, o Gmail irá ignorá-lo.
Você pode pensar que seu CSS é perfeito, porque você o fez com tanta frequência, por que eu teria erros no meu CSS? Execute-o por meio do Validador CSS (por exemplo http://www.css-validator.org/ ) e veja o que acontece. 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
only for Microsoftbloco de código, assim:Este é apenas um exemplo simples, mas, quem sabe, pode ser útil em algum momento.
fonte
Como já foi dito, alguns programas de e-mail não lêem os estilos css. Se você já tem um e-mail escrito, pode usar a seguinte ferramenta do zurb para incorporar todos os seus estilos:
http://zurb.com/ink/inliner.php
Isso é extremamente útil ao usar modelos como os mencionados acima do mailchimp, monitor de campanha, etc., pois eles, como você descobriu, não funcionam em alguns programas de e-mail. Esta ferramenta deixa sua seção de estilo para os programas de e-mail que irão lê-la e coloca todos os estilos embutidos para obter uma legibilidade mais universal no formato que você deseja.
fonte
Observe que os serviços e ferramentas para enviar e-mails podem ser capazes de embutir seu CSS para você, permitindo que o CSS nas
<style>tags funcione no Gmail.Por exemplo, se você estiver enviando e-mails com MailChimp, o CSS das
<style>tags será embutido automaticamente por padrão. Com o Mandrill, você pode habilitar essa funcionalidade (embora seja desabilitada por padrão por motivos de desempenho ) marcando a caixa "Estilos CSS Inline em emails HTML" na seção "Padrões de envio" da guia Configurações:fonte
Eu tive o mesmo problema ao projetar um modelo no Mailjet. A solução do problema foi minimizar o código CSS dentro das
<style>tags.fonte