Skip to content

CSS inlining

O CSS inlining é uma forma de pré-processamento de e-mail que move estilos de uma folha de estilo CSS para o corpo de um e-mail HTML. O termo “inlining” refere-se ao fato de que os estilos são aplicados “inline” a elementos HTML individuais.

Para alguns clientes de e-mail, o CSS inlining pode melhorar a forma como os e-mails são renderizados e ajudar a confirmar que seus e-mails têm a aparência esperada. Se você já tiver a maior parte do CSS incorporado ou tiver certeza de que seu HTML e CSS são compatíveis com os requisitos da maioria dos clientes de e-mail, talvez não seja necessário ativar esse recurso. Isso pode fazer com que os estilos incorporados dinamicamente entrem em conflito com os estilos inline existentes e pode alterar a pré-visualização esperada e a renderização do e-mail.

Uso de CSS inlining

É possível controlar se o CSS inlining está ativado ou desativado em qualquer mensagem de e-mail usando a opção Ativar CSS inline na guia Informações de envio do editor de HTML.

Caixa de seleção para gerenciar o CSS inlining no criador de HTML.

Estado padrão de inlining

Você pode definir um estado padrão ligado ou desligado globalmente em Configurações > Preferências de e-mail. Localize a configuração para CSS Inlining. Essa configuração determina o valor padrão desejado com o qual todas as novas mensagens de e-mail começam. Observe que alterar essa configuração não afetará nenhuma das suas mensagens de e-mail existentes. Você também pode substituir esse padrão a qualquer momento ao redigir mensagens de e-mail.

Opção de aplicar CSS inline em novos e-mails por padrão, localizada nas configurações de e-mail.

Conteúdo conectado e CSS inlining

O CSS inlining é executado antes de o Conteúdo conectado ser avaliado. O HTML retornado pelo Conteúdo conectado não passa pela mesma etapa de inlining. Coloque os estilos necessários do Conteúdo conectado diretamente na resposta (atributos style inline ou regras incorporadas), ou desative o inlining para a mensagem se isso for mais adequado ao seu modelo.

Content Blocks em modelos HTML personalizados

Quando você insere um bloco de conteúdo com Liquid dentro de um modelo de e-mail ou Campaign em HTML personalizado, as regras CSS do modelo pai podem sobrescrever os estilos definidos dentro do bloco de conteúdo. Verifique se há seletores conflitantes ou regras globais no wrapper do modelo.

Limitações de CSS do Gmail

O Gmail possui limitações específicas de CSS que podem fazer com que os e-mails sejam exibidos na visualização de desktop em vez da visualização mobile no app do Gmail. Isso pode ocorrer pelos seguintes motivos:

  • Excesso de CSS: se o seu e-mail contiver CSS em excesso, o Gmail pode remover todo o bloco de estilos.
  • CSS incompatível: qualquer CSS incompatível com o Gmail (incluindo CSS válido que o Gmail não suporta) pode fazer com que o bloco de estilos seja removido.
  • Contas não Gmail no app do Gmail: CSS no <head> não é suportado.

Media queries no Gmail

As media queries de CSS geralmente funcionam nos apps do Gmail, mas existem limitações. Se você estiver enfrentando problemas com media queries que não funcionam corretamente no Gmail:
New Stuff!