Por que o flexbox e o grid são apontados como erros?

A maioria dos clientes de email, especialmente o Outlook para desktop, não suporta layouts modernos como flexbox e grid, exigindo o uso de tabelas para estruturação.

O que significa o aviso de CSS não inline?

Clientes como o Gmail para dispositivos móveis costumam remover blocos do cabeçalho, tornando necessário aplicar estilos diretamente nos elementos (inline).

O que é o atributo role="presentation" nas tabelas?

Ele indica aos leitores de tela que a tabela é usada apenas para fins de layout e não para dados tabulares, melhorando a acessibilidade do email.

Este linter renderiza o email em dispositivos reais?

Não, ele realiza uma análise estática de regras de compatibilidade. Para testes visuais em tempo real, utilize serviços como Litmus ou Email on Acid.

Qual a diferença entre os níveis de rigor?

O modo Rigoroso exibe todas as recomendações (incluindo acessibilidade), o Equilibrado foca em problemas comuns de renderização, e o Brando exibe apenas erros críticos.

Elysia Tools

Navegação

Development

Linter de HTML para Email

Verifica a compatibilidade entre clientes de templates HTML de email: flex/grid não suportado, CSS não inline, armadilhas de renderização Word do Outlook, problemas de layout com tabelas e falta de acessibilidade. Cobre limitações de Gmail/Outlook/Apple Mail.

Detalhes

O que esta ferramenta ajuda você a fazer

Pega os bugs de HTML-email que só aparecem no Outlook, Gmail e Apple Mail — antes de enviar.

Por que HTML de email é diferente. Email é em grande parte HTML dos anos 90 renderizado por engines inconsistentes: Outlook usa Microsoft Word, Gmail remove a maioria dos <style>, Apple Mail é o mais tolerante. Flexbox, grid e position:fixed quebram na maioria dos clientes.

O que verifica. CSS não suportado, CSS não inline, armadilhas do Outlook (VML), layout com tabelas (role/cellpadding), imagens (alt/width), acessibilidade (lang, contraste, formulários/script).

Níveis. 🔴 Error, 🟡 Warning, 🔵 Info. Strict mostra info; Lenient só erros e warnings principais.

Limitações. É um verificador de regras estático — não pode rodar o email em clientes reais.

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Execuções de exemplo preparadas

Clique em um exemplo para preencher o formulário automaticamente. Arquivos ainda precisam ser enviados.

2 exemplos

CSS moderno em email (flex + grid)

Template usando flexbox e grid — não suportados no Outlook. O linter sinaliza como erro com alternativas baseadas em tabelas.

<div class="em-root">2 errors: display:flex and display:grid unsupported in Outlook. Fix: use tables or inline-block.

Email com tabela à prova de balas (limpo)

Um email bem construído com tabelas: role=presentation, cellpadding=0, imagens com alt e width, estilos inline. O linter não encontra problemas.

<div class="em-root em-clean">✓ No issues found.</div>

Entradas

Preencha os campos necessários e execute a ferramenta.

2 opções

ConteúdoCole ou digite os valores principais.1

HTML do emailtextareaObrigatório

ConfiguraçõesAjuste formatos, intervalos, números e modos.1

RigorselectOpcional

Resultado

Pronto para executar

Depois de executar, arquivos, texto, dados estruturados ou saída em streaming aparecerão aqui.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Linter de HTML para Email

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Execuções de exemplo preparadas

Entradas

Resultado

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Identificação de CSS Moderno Incompatível

2. Validação de Tabela Acessível e Limpa

Perguntas frequentes

Amostras de HTML com Imagens

Amostras HTML

Exemplos PDF

Exemplos de Comunicação em Tempo Real WebRTC

Verificador de acessibilidade

Gerador de Data URI

Gerador de relatorio de auditoria de acessibilidade

Extrator de imagens e captions PDF

Ferramentas de conversao de formatos de imagem e exportacao animada

Ferramentas de limpeza, acabamento e preparo em lote de imagens

Ferramentas de extração, limpeza e exportação de HTML para Markdown/PDF

Ferramentas de metadados de imagem, EXIF e limpeza de privacidade