Anúncios incomodam? Ir Sem anúncios Hoje 

Inlinhador de E-mails CSS (Inlinhador de Atributo de Estilo)

DesenvolvedorTexto

ANUNCIADO Remover?

ENTRADA

Processo Automático

HTML com

Guia

CSS Email Inliner (Style Attribute Inliner)

Inlinhador de E-mails CSS (Inlinhador de Atributo de Estilo)

Converter HTML com um bloco <style> em markup adequado para e-mails, movendo todas as regras de CSS para atributos inline style="". Os clientes de e-mail removem ou ignoram blocos <style>, portanto, a inlinha é a única forma confiável de manter o design intacto em Gmail, Outlook, Yahoo e Apple Mail.

Cole seu HTML completo na parte esquerda; a ferramenta analisa cada seletor, resolve a especificidade exatamente da forma que os navegadores fazem, e escreve as declarações vencedoras em cada elemento correspondente. As regras de pseudo-classe, como :hover e qualquer consulta @media, são mantidas em um bloco <style> residual, pois os clientes de e-mail que as suportam ainda precisam delas lá.

Como usar

Cole seu HTML — documento completo ou fragmento com um bloco <style> — no campo de entrada.
Decida se deseja manter consultas de mídia e regras de pseudo-classe (recomendado para e-mails responsivos).
Opicionalmente, remova os atributos class do resultado após a inlinha dos estilos.
Ative ou desative a formatação legível conforme desejar um resultado legível ou compacto.
Copie o HTML inlaid ou baixe como arquivo, depois cole diretamente em seu provedor de e-mail.

Características

Mesclagem consciente de especificidade – Resolve IDs, classes, atributos e tipos de elementos exatamente como a cascata do navegador.
Tratamento de !important – Declarações !important externas são corretamente priorizadas sobre estilos inline simples, conforme especificado pelo CSS.
Preservação de consultas de mídia – As regras @media responsivas são mantidas intocadas para que seus pontos de referência em dispositivos móveis ainda funcionem.
Fallo de pseudo-classe – As regras :hover, :focus e ::before não podem ser inlaid; a ferramenta as mantém em um bloco <style> reduzido.
Múltiplos blocos <style> – Gerencia documentos com várias tags de estilo no <head> ou <body>.
Remoção opcional de classes – Remova os atributos class="" agora redundantes para um payload mais leve.
Saída com formatação legível – Saída HTML indentada e legível ou saída compacta em uma única linha.
100% do lado do cliente – Seu HTML nunca sai do navegador. Sem upload, sem processamento em servidor.

ANUNCIADO Remover?

 Perguntas frequentes

Por que os e-mails HTML precisam de CSS inlaid em vez de usar um bloco <style>?

Muitos clientes de e-mail — especialmente versões antigas do Outlook e vários provedores de webmail — removem completamente o elemento head ou sandboxam a mensagem, ignorando assim estilos externos e incorporados. Os atributos inline style em cada elemento são a única forma de declaração que todos os principais clientes de e-mail respeitam, portanto, o passo de inlinha é uma exigência rígida para designs que precisam parecer iguais em Gmail, Outlook, Yahoo e Apple Mail.
O que é especificidade de CSS e por que a ordem da cascata importa para a inlinha?

A especificidade é o peso que o CSS atribui a um seletor com base em seus IDs, classes, atributos, pseudo-classes e tipos de elementos. Quando duas regras almejam a mesma propriedade em um mesmo elemento, o navegador mantém o valor da regra com maior especificidade; em caso de empate, a ordem de origem é quebrada, com a regra mais recente vencendo. Um inliner precisa recriar esse algoritmo declaração por declaração, caso contrário, uma regra de menor especificidade poderia sobrescrever uma de maior especificidade e o design renderizado mudaria silenciosamente.
Como a flag !important interage com estilos inline?

Na cascata padrão, os estilos inline estão em uma origem superior às folhas de estilo do autor, portanto, normalmente superam qualquer regra de classe ou nível de elemento. A flag !important é a única exceção: uma declaração !important de uma folha de estilo do autor supera uma declaração inline sem !important. É por isso que um botão colorido de branco !important em uma classe ainda será renderizado de branco mesmo quando o elemento carrega style="color: blue".
Por que as regras de pseudo-classe como :hover ou pseudo-elementos como ::before não podem ser inlaid?

O atributo style contém declarações que se aplicam incondicionalmente ao elemento em que está. As regras de pseudo-classe descrevem um estado — hover, focus, checked — e os pseudo-elementos descrevem conteúdo gerado que não tem um nó real no DOM. Nenhum desses conceitos tem uma forma correspondente de atributo inline, portanto, qualquer inliner precisa deixar essas regras em um bloco <style> residual para os poucos clientes de e-mail que as suportam.
O que acontece com as consultas @media durante o processo de inlinha?

As consultas de mídia são regras condicionais cujas declarações só se aplicam quando o viewport atinge um limite. Como o atributo style não pode expressar aplicação condicional, as consultas de mídia devem ser preservadas exatamente dentro de um bloco <style>. Os designs responsivos dependem de consultas min-width e max-width para trocar layouts em dispositivos móveis, portanto, removê-las eliminaria completamente o comportamento responsivo.