Ir para o conteúdo

Conversor CSS para email

Converte CSS de um bloco de estilos em atributos style inline para que funcione em clientes de email.

Entrada
Saída

Conversor CSS para email

A maioria dos clientes de email remove ou ignora CSS escrito num bloco <style> — a aplicação web do Gmail é o exemplo mais conhecido. A solução é mover cada regra para o elemento que ela afecta como um atributo style="", e é exactamente o que esta ferramenta faz: cola HTML com um bloco <style> e obtém a mesma marcação com os estilos convertidos em inline, pronto para colar numa campanha ou template transaccional.

A fusão respeita a especificidade CSS por padrão, portanto uma regra como #footer vence um simples a mesmo que essa regra venha depois na folha de estilos — desactiva "Respeitar especificidade do selector" para fundir apenas pela ordem de origem. Regras que não podem ser inlináveis — media queries, :hover, outras at-rules — nunca são silenciosamente eliminadas: "Manter regras que não podem ser inline" deixa-as num bloco <style> aparado, enquanto "Remover bloco <style> original" decide se esse bloco é emitido. "Adicionar atributos width/bgcolor legados" espelha width, height e background-color nos atributos simples que versões antigas do Outlook esperam, "Remover classes e IDs não utilizadas" limpa selectores que nada referencia, e "Minificar resultado" colapsa espaços em branco restantes.

O suporte de selectores abrange selectores de tipo, classe, ID e atributo, mais combinadores de descendente e filho — os padrões que folhas de estilos de email reais usam. O atributo style="" existente de um elemento sempre vence sobre qualquer coisa fundida, correspondendo a como navegadores aplicam a cascata. Com "Mostrar avisos de propriedades não suportadas" activado, propriedades que muitos clientes ignoram — float, position: fixed, transformações, box-shadow — são sinalizadas num comentário no topo do resultado, para que as detectes antes de enviar um teste.

Tudo funciona localmente no seu navegador: o HTML que cola nunca é carregado para lado nenhum. Copia o resultado, descarrega como ficheiro .txt, ou envia directo para outra ferramenta para continuar a limpá-lo.

FAQ

Por que preciso de converter CSS para inline em emails?
Muitos clientes de email — especialmente a interface web do Gmail — removem blocos <style> do <head> ou os ignoram completamente, mas respeitam um atributo style="" no próprio elemento. A inlináção é o workaround em que toda a indústria de HTML email se baseia.
O que acontece com media queries e regras :hover?
Não podem ser inlináveis num único elemento, portanto por padrão são mantidas num bloco <style> aparado para os clientes que a leem — desactiva "Manter regras que não podem ser inline" para as eliminares.
Trata a especificidade do selector correctamente?
Sim. Um selector ID sobrepõe um selector de classe, que sobrepõe um selector de tipo, independentemente da ordem em que as regras aparecem — as mesmas regras que um navegador usa. Desactiva "Respeitar especificidade do selector" para fundir apenas pela ordem de origem.
Para que servem os atributos width/bgcolor?
Algumas versões mais antigas do Outlook processam tabelas usando o motor do Word e ignoram CSS inline para fundos e dimensionamento. "Adicionar atributos width/bgcolor legados" espelha esses valores nos atributos HTML simples que esses clientes respeitam.
O meu HTML é carregado para algum lugar?
Não. A conversão CSS para inline funciona inteiramente no seu navegador — o seu template de email nunca sai do seu dispositivo.