Inliner CSS online

O que faz esta ferramenta?

O Inliner CSS online resolve o problema de estilos CSS que não são aplicados corretamente em clientes de e-mail que removem ou ignoram elementos <style>. A ferramenta pega no HTML fornecido, processa os estilos e coloca as declarações diretamente nos atributos style de cada elemento.

Exemplo prático

Se introduzir o seguinte HTML:

<style>p{color:red}</style><p>Olá</p>

Após a conversão, o parágrafo receberá a declaração inline style="color: red;". Se a opção "remover estilo" estiver ativa, o elemento <style> é removido e o resultado é serializado como um documento completo, começando com um doctype.

Parâmetros e processamento

O navegador analisa o HTML e concatena o texto de todos os elementos <style> com o CSS extra. Depois, procura blocos de seletores simples (com padrão de chavetas) e aplica as declarações correspondentes ao estilo inline de cada elemento. Seletores inválidos são ignorados.

Limitações

Esta conversão é leve e não implementa totalmente a cascata CSS, especificidade, media queries, keyframes, pseudo-elementos, CSS aninhado, folhas de estilo externas ou estilos calculados. O navegador pode normalizar o HTML durante a análise. A ferramenta não é um sanitizador, nem um testador de compatibilidade, e não garante que a renderização visual seja inalterada.

Perguntas frequentes

O que acontece com seletores complexos ou media queries?

Seletores inválidos são ignorados. Media queries, keyframes, pseudo-elementos e CSS aninhado não são suportados; apenas blocos simples de seletores são processados.

Posso usar folhas de estilo externas?

Não. A conversão é local e não carrega folhas de estilo externas nem recursos remotos. Deve incluir todo o CSS no HTML ou no campo extra.

O resultado é um documento completo?

Sim, quando a opção "remover estilo" está ativa, o resultado é serializado como um documento completo, começando com um doctype. Se desativar essa opção, os elementos <style> permanecem no HTML.

Lista de verificação

• Verifique se o HTML contém elementos <style> ou se adicionou CSS extra.
• Confirme que a opção "remover estilo" está como pretende.
• Inspecione o resultado no cliente de e-mail ou navegador alvo.
• Lembre-se de que a ferramenta não é um sanitizador nem um garantia de compatibilidade.