Ponha o CSS de um e-mail em linha
O Outlook e vários webmails ignoram ou removem um bloco <style>. Pôr em linha é o passo chato e mecânico entre um design que funciona num navegador e um que funciona numa caixa de entrada.
- Funciona inteiramente no seu navegador
- Funciona offline
- Sem envio de arquivos
- Sem registro
- Sem marca d’água
Carregando a ferramenta…
Como funciona
- Cole o HTML com o bloco <style> dele.
- Aperte “Inline the CSS” (pôr o CSS em linha).
- Copie ou baixe o resultado, e confira na prévia abaixo.
Por que nada é enviado
Tudo o que esta página faz é executado por código que roda dentro da aba do seu navegador, com o mesmo motor que desenha as páginas web. O arquivo é lido do disco para a memória da aba, transformado ali e escrito de volta como um download. Ele nunca é enviado a lugar nenhum — nem para nós, nem para terceiros.
Comprove você mesmo
- Abra as ferramentas de desenvolvedor do navegador (F12) e escolha a aba Rede.
- Carregue o seu arquivo e rode a ferramenta.
- As únicas requisições que você vai ver baixam o código da própria ferramenta — e, em algumas ferramentas pesadas, o motor de código aberto delas a partir de um CDN público — mais um pequeno aviso de visita para loreatec.jp (endereço e título da página, nada mais). Nenhuma delas leva o seu arquivo.
Perguntas frequentes
Por que as media queries não podem ir para o atributo style?
Porque um estilo em linha não tem condição nenhuma presa a ele — ele vale sempre. Uma media query é uma condição, então ela só pode viver num bloco <style>. É por isso que um e-mail responsivo precisa dos dois: estilos em linha para o design base, e um bloco <style> para o layout de celular, aceitando que os programas que removem o <style> vão mostrar o design base.
O que acontece com :hover?
Mesmo problema, mesma resposta: fica no bloco <style>. Trate os efeitos de hover como um bônus para os programas que os suportam, nunca como algo de que a mensagem dependa.
Quem ganha, o meu estilo em linha ou a folha de estilo?
O seu. Tudo que já está num atributo style é mantido e colocado depois das regras que vêm da folha de estilo, então ele continua se sobrepondo a elas — igual a um navegador.
Isto é a mesma coisa que a minha ferramenta de newsletter faz?
A maioria delas põe em linha no envio, sim. Isto serve para quando você entrega o HTML a outra pessoa, envia por uma API, ou está investigando por que uma regra não sobreviveu.