CSS em Email: O Que Você Pode e Não Pode Fazer
A realidade prática de estilizar emails HTML com CSS.
CSS em email é um subconjunto restrito do CSS em navegadores. Propriedades que você usa diariamente no desenvolvimento web podem não funcionar em clientes de email. Este guia documenta o que é seguro, o que requer soluções alternativas e o que evitar completamente.
Se você quiser pular as limitações do CSS, construtores visuais como Sequenzy geram código compatível automaticamente. Mas entender CSS em email ajuda a depurar problemas e tomar decisões informadas.
Estilos Inline vs Incorporados
Estilos Inline (Mais Confiáveis)
<p style="color: #333333; font-size: 16px; line-height: 1.5;">
Text with inline styles
</p>Estilos inline funcionam em todos os clientes de email. Eles têm a maior especificidade e não podem ser removidos. A desvantagem: código verboso e sem reutilização sem duplicação.
Estilos Incorporados (Head)
<head>
<style>
.text-body {
color: #333333;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<p class="text-body">Text with class</p>
</body>Estilos incorporados funcionam na maioria dos clientes, mas o Gmail historicamente os remove em certos contextos. Use para melhorias (media queries), mas não para estilos críticos.
Melhor Prática: Ambos
Use estilos inline para renderização crítica. Use estilos incorporados para media queries e aprimoramento progressivo. Ferramentas de inliner CSS automatizam essa conversão.
CSS de Tipografia
Propriedades de Fonte Seguras
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold; /* or 700 */
font-style: italic;
color: #333333;
line-height: 1.5; /* or 24px */
text-align: left; /* center, right */
text-decoration: none; /* underline */
text-transform: uppercase; /* lowercase */
letter-spacing: 1px;Todos os principais clientes suportam essas propriedades. Fique com unidades px para font-size (em/rem menos confiáveis). Evite valores de font-weight outros que normal (400) e bold (700).
Fontes Web
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>
<p style="font-family: 'Roboto', Arial, sans-serif;">
Custom font with fallback
</p>Fontes web funcionam no Apple Mail, iOS e alguns clientes Android. Gmail e Outlook usam o fallback. Sempre inclua um fallback web-safe.
CSS do Modelo de Caixa
Padding (Seguro em Células de Tabela)
<td style="padding: 20px;">
Content with padding
</td>
<!-- Or individual sides -->
<td style="padding-top: 20px; padding-bottom: 10px;">
Content
</td>Padding em células de tabela é confiável. Em divs e parágrafos, os resultados variam. Em caso de dúvida, use células de tabela.
Margin (Use com Cuidado)
Margins são inconsistentes, especialmente no Outlook. Prefira padding em células container em vez de margins no conteúdo.
<!-- Instead of margin on heading -->
<td style="padding-bottom: 20px;">
<h1 style="margin: 0;">Heading</h1>
</td>Width e Height
width: 600px;
width: 100%;
max-width: 600px;
height: 200px; /* Avoid when possible */Width funciona de forma confiável. max-width é útil para emails responsivos, mas Outlook o ignora (use comentários condicionais para largura fixa no Outlook). Height deve ser evitado pois o conteúdo deve determinar a altura.
CSS de Fundo
Cor de Fundo (Segura)
background-color: #f5f5f5;
background: #f5f5f5; /* shorthand works too */Imagens de Fundo (Complexas)
<!-- Works in most clients, NOT Outlook -->
<td style="background-image: url('image.jpg'); background-color: #333;">
<!-- For Outlook, use VML -->
<!--[if gte mso 9]>
<v:rect style="width:600px;height:300px;" stroke="false" fill="true">
<v:fill type="tile" src="image.jpg" />
<v:textbox>
<![endif]-->
<div style="background-image: url('image.jpg');">
Content
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->Imagens de fundo requerem VML para suporte no Outlook. Sempre inclua um fallback de background-color.
CSS de Borda
Bordas Sólidas (Seguras)
border: 1px solid #cccccc;
border-bottom: 2px solid #333333;
border-top: none;Border Radius (Não no Outlook)
border-radius: 4px; /* Ignored in Outlook */Border-radius funciona na maioria dos clientes, mas Outlook mostra cantos quadrados. Para botões, isso é geralmente aceitável. Para designs arredondados críticos, use imagens.
CSS de Layout
Propriedade Display
display: block;
display: inline;
display: inline-block;
display: none;Valores básicos de display funcionam. display: flex e display: grid NÃO funcionam em email. Use tabelas para layout.
Position (Evite)
Posicionamento CSS (absolute, relative, fixed) não funciona de forma confiável. Use layout baseado em tabelas em vez disso.
Float (Evite)
Floats são não confiáveis no Outlook. Use colunas de tabela para conteúdo lado a lado.
Consultas de Mídia
@media screen and (max-width: 600px) {
.mobile-full {
width: 100% !important;
display: block !important;
}
.mobile-hide {
display: none !important;
}
.mobile-text-center {
text-align: center !important;
}
}
@media (prefers-color-scheme: dark) {
.dark-bg {
background-color: #1a1a1a !important;
}
}Consultas de mídia funcionam no Apple Mail, iOS, Gmail App. Elas NÃO funcionam no Outlook ou Gmail web (de forma confiável). Use !important para sobrescrever estilos inline.
Reset CSS para Email
<style>
/* Prevent text size adjustment */
body, table, td, p, a, li {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Remove table spacing */
table, td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove image borders and gaps */
img {
-ms-interpolation-mode: bicubic;
border: 0;
display: block;
outline: none;
text-decoration: none;
}
/* Reset body */
body {
margin: 0;
padding: 0;
width: 100% !important;
height: 100% !important;
}
</style>Inlining de CSS
Ferramentas convertem estilos incorporados em estilos inline para confiabilidade:
- Juice: biblioteca Node.js para inlining de CSS
- Premailer: ferramenta online e gem
- MJML: lida com inlining durante a compilação
- Construtores de email: Sequenzy e outros inline automaticamente
Depuração de Problemas CSS
- Verifique estilos inline primeiro. Estilos inline ausentes ou incorretos são o problema mais comum.
- Teste no Outlook. Se o CSS funcionar no Outlook, provavelmente funciona em todos os lugares.
- Simplifique. Remova CSS até o problema desaparecer, depois adicione gradualmente.
- Verifique especificidade. Estilos inline podem sobrescrever seus estilos incorporados.
O Essencial
CSS em email é uma linguagem restrita. Fique com propriedades bem suportadas, use estilos inline para renderização crítica e teste em vários clientes. Frameworks e construtores como Sequenzy lidam com essas restrições automaticamente.
As limitações são frustrantes se você está acostumado com CSS web moderno. Mas entendê-las permite construir emails que renderizam consistentemente em todos os clientes de email peculiares que seus destinatários usam.