Como os fallbacks funcionam

O motor de fallback é o coração do MailInApp. Ele existe porque os clientes de e-mail discordam sobre quase tudo: alguns renderizam CSS moderno, alguns removem tags <style> por completo, e o Outlook clássico renderiza e-mails com o motor do Microsoft Word. Em vez de projetar para o menor denominador comum, você projeta uma vez — e o motor compila cada bloco em três níveis.

Os três níveis

Nível 1 — Cinético

Interatividade completa em CSS: carrosséis que deslizam, acordeões que expandem, revelações que animam. A marcação cinética é construída sobre máquinas de estado em CSS — caixas de seleção e botões de opção ocultos cujo estado :checked determina o que fica visível — porque essa é a interatividade que os clientes de e-mail realmente suportam. Nenhum JavaScript é usado em momento algum; todo cliente de e-mail o remove.

A renderização cinética alcança o Gmail (aplicativos web e móvel), o Apple Mail, o Yahoo Mail e o Samsung Mail — a grande maioria das caixas de entrada de consumidores.

Nível 2 — Estático

Alguns clientes removem blocos <style> por completo (e o Gmail os descarta de mensagens cortadas). Para eles, cada bloco se reduz a um conteúdo limpo e empilhado com um link de chamada para ação — para votar, para abrir a galeria, para enviar o formulário — apontando para a visualização ao vivo hospedada. Links simples funcionam em 100% dos clientes de e-mail, o que torna esse nível universal.

Nível 3 — Outlook

O Outlook clássico para Windows renderiza com o Word, que não suporta nem CSS cinético nem a maior parte do layout moderno. O motor emite uma versão dedicada de cada bloco baseada em tabelas dentro de comentários condicionais do Outlook — marcação que só o motor do Word enxerga. Destinatários no Outlook clássico recebem um e-mail limpo e intencional, nunca um e-mail quebrado.

Um e-mail, todas as caixas de entrada

Os três níveis são enviados dentro do mesmo arquivo HTML. Qual nível um destinatário vê é decidido pelas próprias regras de renderização do cliente dele, não por uma detecção de cliente frágil:

• clientes que suportam CSS cinético renderizam o Nível 1 e ocultam a variante estática;
• clientes que removem estilos renderizam naturalmente o Nível 2;
• o motor do Word só enxerga o Nível 3, por meio de comentários condicionais.

A interação segue a mesma filosofia

Blocos que coletam dados (enquetes, avaliações, formulários) usam por padrão a interação baseada em links — cada opção é um link simples que registra a resposta — porque links são o único elemento primitivo que funciona em qualquer lugar. O envio de formulário dentro do e-mail é adicionado por cima como um aprimoramento progressivo nos clientes que o suportam. Detalhes em Interações e análises.

O que o motor se recusa a fazer

Parte do trabalho do motor é saber dizer não. Técnicas com suporte ruim ou inconsistente entre clientes — JavaScript, vídeo incorporado, elementos <details>, variáveis CSS — não são usadas, nunca, por mais tentador que o resultado pareça em uma demonstração. Se uma técnica não consegue degradar graciosamente, ela não vai para produção. O panorama completo de suporte está em Suporte a clientes de e-mail.

O AMP for Email recebe uma menção explícita própria, não apenas uma citação nessa lista: é uma troca deliberada, não um recurso ausente. Veja Por que não usar AMP for Email?