CSS nelle email: cosa funziona, client per client

Una scheda per ogni client

Le tabelle di compatibilità elencano le proprietà una per una; qui si fa il percorso inverso, perché è quello che serve quando un cliente scrive «nel mio Outlook si vede male». Per ogni client trovi le proprietà che contano di più per un layout di newsletter.

Outlook per Windows

È il client che decide quasi tutte le scelte prudenti. Nei dati di caniemail.com risultano non supportati border-radius, background-image, display:flex e grid, @media, rem, box-shadow, opacity e position. padding funziona solo sulle celle di tabella, max-width solo sugli elementi table, e per margin la scheda segnala tra l'altro che il valore auto non è riconosciuto. Funzionano invece background-color, @import e l'elemento link, cosa rara tra i client.

Gmail, web e app

Il punto debole è il blocco style: la scheda lo dà come parziale su tutte le versioni, non supportato nel webmail per cellulare e limitato a 16 KB nel webmail su desktop. Le media query sono parziali e nelle app non funzionano con account non Google. Sul resto Gmail è generoso: border-radius, background-image, flex e grid funzionano nel webmail, mentre box-shadow è parziale nelle app e assente sul web, position, @font-face e le variabili CSS non sono supportati. Per background-image la scheda ricorda un caso in cui Gmail elimina l'intero attributo style quando compare un URL di immagine.

Outlook.com, Outlook per Mac, iOS e Android

Questa famiglia è molto più vicina a un browser: border-radius, box-shadow, background-image, flex e grid risultano supportati. Mancano linear-gradient(), calc(), clamp() e @font-face, mentre le media query sono parziali e quelle annidate vengono rimosse. Per i temi scuri è l'unica famiglia che aggiunge gli attributi data-ogsc e data-ogsb al documento, come spiega l'articolo sul dark mode.

Apple Mail

È il client più completo: le variabili CSS, @supports, @font-face, gradienti, transform e media query sono supportati, e tra le proprietà citate in questa guida solo position resta parziale. Proprio per questo è anche il client da cui non bisogna fidarsi: un'email che si vede bene in Apple Mail dice poco su tutti gli altri.

Yahoo! Mail e AOL

Yahoo supporta flex e grid, ma non box-shadow, rem, height né @font-face; border-radius è parziale, e background-image non accetta più valori separati da virgola. Le media query sono limitate a screen e alle condizioni su larghezza e altezza. AOL, nei dati di caniemail.com, non supporta le media query per l'aspetto scuro.

Samsung Email

Sul versante Android è tra i più completi: variabili CSS, @font-face, flex, grid e box-shadow risultano supportati, mentre @import e text-overflow no. Come per Apple Mail, vale la regola di non usarlo da solo come banco di prova.

Il flusso: scrivere, inlinare, controllare

Scrivere tutto inline a mano è faticoso e invita agli errori. Il flusso più comune è tenere le regole in un blocco style durante lo sviluppo e lasciare che uno strumento le copi negli attributi al momento dell'invio. Juice lo fa in Node:

const juice = require('juice');
const fs = require('fs');

const sorgente = fs.readFileSync('newsletter.html', 'utf8');
const finale = juice(sorgente); // copia le regole del <style> negli attributi style

fs.writeFileSync('newsletter.inline.html', finale);

Gli strumenti di tipo framework lo integrano: in MJML, ad esempio, mj-style con l'attributo inline="inline" copia le regole negli attributi (documentazione MJML). Il risultato va comunque controllato nell'HTML che arriva davvero, perché il fornitore di invio può riscrivere link e immagini. Per decidere quale strumento usare, vedi il confronto Maizzle e MJML.

Layout ibrido per Outlook

Poiché in Outlook per Windows max-width funziona solo sulle tabelle, il trucco classico è la «tabella fantasma»: un commento condizionale che dà una tabella a larghezza fissa solo a Outlook, mentre gli altri client leggono il div con max-width. La stessa struttura evita margin: auto dove non è riconosciuto.

<!--[if mso]>
<table role="presentation" align="center" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<div style="max-width: 600px; margin: 0 auto;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td style="padding: 24px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; color: #222222;">
        Il tuo ordine è stato spedito.
      </td>
    </tr>
  </table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->

Tipografia e interlinea

Le unità in px sono sicure ovunque; rem non è supportato in Outlook per Windows né in Yahoo, e la scheda di font-size lo segnala come limite di Outlook. Per l'interlinea, la scheda di line-height avverte che le unità px ed em si comportano in modo irregolare in Outlook per Windows e indica mso-line-height-rule: exactly come rimedio. Anche letter-spacing è parziale lì, soprattutto con valori molto negativi.

<td style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; mso-line-height-rule: exactly; color: #222222;">
  Testo del paragrafo con interlinea stabile anche in Outlook per Windows.
</td>

Per i font personalizzati vedi la scheda di @font-face: sì in Apple Mail e Samsung Email, parziale in Outlook per Windows (la dichiarazione è letta, i font remoti sono ignorati), no altrove. Conclusione pratica: scegli lo stack in base al font di sistema che vuoi come resa finale e considera il font personalizzato un bonus.

Media query: una rifinitura, non una base

Con Outlook per Windows che non le legge e Gmail che le supporta solo in parte, un'email che funziona soltanto grazie alle media query si rompe per una quota non trascurabile di iscritti. Imposta quindi la versione stretta come predefinita (tabella al width:100%, max-width sul contenitore) e usa le media query per migliorare, ad esempio per impilare due colonne:

<style>
  @media screen and (max-width: 600px) {
    .col { display: block !important; width: 100% !important; }
    .nascondi-mobile { display: none !important; }
  }
</style>

Il !important serve a battere gli stili inline, ma la scheda avverte che in Gmail è supportato solo in minuscolo e in Outlook per Windows dipende dagli spazi prima della parola chiave. Altri schemi sono nella guida al design responsive.

Quando qualcosa si rompe

1. Identifica il client in cui compare il difetto e cerca la proprietà nella scheda corrispondente qui sopra.
2. Leggi l'HTML ricevuto, non quello di partenza: il fornitore di invio o il client possono aver tolto regole o attributi.
3. Togli una regola alla volta finché il difetto sparisce, poi reinseriscila con un'alternativa.
4. Controlla la precedenza: l'inline vince sul blocco style, il blocco di rimando vince solo con !important.
5. Prova almeno tre client diversi: uno della famiglia Outlook per Windows, uno Gmail, uno Apple Mail, come descritto nella guida alla compatibilità dei client.

Se preferisci non scrivere questo codice a mano, la guida ai builder HTML confronta framework, editor visuali e piattaforme complete.