CSS inliner
Para que serve mesmo um CSS inliner
O email não é um separador do browser. Gmail, Outlook, Apple Mail e a maior parte das pré-visualizações do ESP aplicam regras próprias sobre que CSS respeitam. Um `<link rel="stylesheet">` para o teu CSS de marca costuma ser ignorado. Um bloco `<style>` no `<head>` sobrevive nalguns clientes e desaparece noutros. O que mais funciona é HTML simples com a apresentação em atributos `style` nas etiquetas que precisam. Um CSS inliner faz isto: manténs a estrutura em HTML e as regras em CSS como na web; num passo copia as declarações correspondentes para cada elemento. O ficheiro que colas no Mailchimp, Brevo ou no fluxo transacional continua a ser HTML, mas já não depende de uma folha de estilos separada carregar bem. Esta página é para essa passagem: HTML e CSS em separadores (ou importa .html + .css), «Colocar CSS em linha», resultado à direita. Quando estiver certo, copia, descarrega ou abre «Pré-visualização HTML» no playground da página inicial para rever o layout antes do envio de teste.
Folha externa e CSS incorporado — não uma só fonte
Muitos inliners online assumem que o CSS já está no HTML — normalmente um `<style>` exportado da ferramenta de design. Quando o projeto se divide como deve ser — `template.html` mais `styles.css` após o build, entrega Figma ou gerador estático — ficas a juntar à mão ou a correr um CLI que só usas duas vezes por ano. O nosso CSS inliner trata os dois casos em pé de igualdade: markup no separador HTML, regras no de CSS, ou importa até dois ficheiros (`.html` e `.css`). O CSS do separador aplica-se juntamente com blocos `<style>` no HTML. A saída é HTML com atributos `style` em linha; as etiquetas `<style>` são removidas — o que a maioria dos fluxos de email espera. Isto conta em newsletters e emails transacionais: tipografia e botões num .css partilhado, fragmentos HTML de autores diferentes. Sem ler CSS externo, bloqueias assim que o repositório parece um projeto real.
O processamento corre no navegador após carregar — sem conta nem fila de upload. `:hover`, `::before` e seletores que não resolvem são ignorados e listados em «Notas». Blocos `@media` simples são achatados; o responsivo na caixa de entrada não é igual ao site — envia sempre um teste real aos clientes-alvo. Para rever espaçamentos ou classes: «Pré-visualização HTML» envia a saída em linha para o playground da página inicial — útil antes de colar no ESP.
Abrir o CSS inlinerSeparadores HTML + CSS
Estrutura e apresentação separadas como num repositório. Quando estiver pronto, coloca em linha e obtém o ficheiro para enviar.
Dois ficheiros de uma vez
Importa .html e .css juntos — menos risco de colagem truncada.
Pré-visualização na página inicial
HTML em linha num novo separador do playground antes de copiar para o ESP.
CSS inliner para email com folhas de estilo externas
A maioria das ferramentas só reescreve o CSS já embutido no HTML. Aqui ficheiro .css à parte e etiquetas <style> no markup — numa só passagem — e depois copia, descarrega ou pré-visualiza.
Um .css externo sem fundir à mão antes
Se `email.css` está ao lado de `template.html`, importa ambos ou cola nos dois separadores. Os seletores passam para atributos `style` — o formato que os clientes de correio esperam. Não precisas de meter a folha no documento antes da ferramenta processar o ficheiro. Os `<style>` no HTML processam-se na mesma passagem. À direita, o HTML em linha completo só de leitura. Copia pelo ícone no cabeçalho da saída, descarrega `inlined.html` ou «Pré-visualização HTML» para o playground. Tudo fica local.
- Separador CSS à parte — como num projeto real
- CSS externo e <style> numa passagem
- Notas sobre regras ignoradas
- Local no navegador, sem upload
Como colocar CSS em linha em modelos de email HTML
Adiciona HTML e CSS
O modelo no separador HTML. Botões, tipografia e utilitários no de CSS — ou importa .html + .css. Se ficar `<style>` no head, deixa — também passa para em linha.
Clica «Colocar CSS em linha»
As regras que coincidem tornam-se atributos style. Vê «Notas» para o que foi ignorado. À esquerda continuas a editar; à direita, o resultado — volta a executar se precisares.
Verifica e envia
Copia, guarda ou pré-visualiza no playground da página inicial. Cola no ESP, testa no Gmail e Outlook e guarda o .html aprovado.
FAQ do CSS inliner
Próximo envio — CSS já em linha?
Cola o HTML, acrescenta CSS externo ou incorporado, coloca em linha. Compara com uma caixa de teste e depois guarda ou copia.
CSS inliner
- .css externo e HTML numa só passagem
- Blocos <style> incorporados incluídos
- Pré-visualização HTML no playground da página inicial
- No signup; use the tool in the browser
Depois de colocar em linha, envia um email de teste real — os clientes de correio vencem qualquer pré-visualização.
Um HTML para o ESP
Coloca em linha uma vez, cola na campanha, arquiva a versão aprovada.