Estilos em linha para e-mail

Muitos clientes de e-mail — principalmente o Gmail na Web antes de maio de 2016 e vários aplicativos móveis ainda hoje — removem ou reescrevem blocos <style> e folhas de estilo externas. Os atributos style="..." em linha são o único CSS com garantia de sobrevivência em todos os clientes.

Escrever estilos em linha manualmente é difícil de manter. Crie o e-mail usando tags <style> e nomes de classes normais; depois execute um inliner (Juice, Premailer, mjml) no momento da compilação para copiar cada regra para o atributo style do elemento correspondente antes do envio.

Os estilos em linha têm a maior especificidade, exceto !important. Uma consulta de mídia que queira substituir um valor em linha precisa usar !important em cada propriedade, pois, caso contrário, a declaração em linha vence independentemente do contexto de @media.

Os inliners copiam apenas as regras que correspondem a elementos individuais; os blocos @media permanecem dentro da tag <style> porque não podem ser transformados em regras planas. Isso não é um problema — o Gmail e outros filtros mantêm os estilos em linha intactos, e os clientes que respeitam as tags <style> aplicam as consultas de mídia sobre eles.

Alguns clientes apresentam problemas com abreviações: font: 14px/1.4 Arial pode ser totalmente ignorado. Use a forma expandida (font-family, font-size, line-height) para que cada propriedade funcione ou falhe de forma independente.

O modo escuro inverte automaticamente as cores em muitos clientes. Definir explicitamente color e background-color nos contêineres de texto evita catástrofes de texto preto sobre fundo preto. Sempre defina os dois em conjunto.

Use px para dimensionamento. rem, vh e vw têm suporte inconsistente. Porcentagens funcionam em tabelas para layouts de largura total; larguras absolutas em pixels nas tabelas e células internas são renderizadas de forma idêntica em todos os clientes.

As fontes da Web por meio de @font-face funcionam no Apple Mail, no iOS Mail e no Thunderbird, mas falham no Outlook e no Gmail. Use uma pilha segura para a Web como valor em linha (Arial, Helvetica, sans-serif) e reserve @font-face exclusivamente como aprimoramento progressivo para clientes compatíveis.

A propriedade background-image em linha em uma div funciona em clientes modernos, mas é ignorada pelo Outlook. Use bgcolor como alternativa e o VML condicional <v:rect> para o Outlook, para que todos os clientes renderizem um fundo visualmente equivalente, mesmo quando não for possível obter fidelidade total.

Os estilos em linha podem parecer corretos em uma prévia no navegador, mas ainda assim ser renderizados de forma diferente no Gmail, no Outlook ou no iOS Mail. Use o Litmus, o Email on Acid ou as prévias gratuitas do Mailtrap para verificar cada cliente importante antes de enviar a campanha.

Adicione uma pequena redefinição na tag <style> (margin: 0 no body, line-height: 100% nas tabelas, border: none nas imagens) para neutralizar os estilos padrão dos clientes. Envolva-a em uma consulta de mídia se quiser aplicá-la somente onde <style> é respeitado.

Por que as consultas de mídia em emails HTML exigem !important em cada propriedade?

O email precisa de estilos em linha para resistir à remoção feita pelos clientes, mas normalmente o autor escreve os estilos em <style> e em linha durante a compilação. Use !important dentro das consultas de mídia para superar a especificidade dos estilos em linha, prefira propriedades completas em vez de abreviações, defina explicitamente color e background-color, mantenha as unidades em px e teste em clientes reais antes de enviar.