Stili inline per le email

Molti client di posta elettronica, soprattutto Gmail sul web prima di maggio 2016 e diverse app mobili ancora oggi, rimuovono o riscrivono i blocchi <style> e i fogli di stile esterni. Gli attributi inline style="..." sono l'unico CSS garantito in tutti i client.

Scrivere manualmente gli stili inline non è manutenibile. Scriva l'email usando normali tag <style> e nomi di classe, quindi esegua un inliner (Juice, Premailer, mjml) in fase di build per copiare ogni regola nell'attributo style dell'elemento corrispondente prima della distribuzione.

Gli stili inline hanno la specificità più alta, fatta eccezione per !important. Una media query che deve sovrascrivere un valore inline deve usare !important per ogni proprietà, perché altrimenti la dichiarazione inline prevale indipendentemente dal contesto @media.

Gli inliner copiano solo le regole che corrispondono ai singoli elementi; i blocchi @media rimangono all'interno del tag <style> perché non possono essere trasformati in regole inline. Va bene così: Gmail e gli altri client che rimuovono gli stili lasciano intatti quelli inline, mentre i client che rispettano i tag <style> applicano le media query aggiuntive.

Alcuni client non gestiscono correttamente le forme abbreviate: font: 14px/1.4 Arial potrebbe essere ignorato completamente. Usi la forma estesa (font-family, font-size, line-height), così ogni proprietà può funzionare o non funzionare indipendentemente dalle altre.

La modalità scura inverte automaticamente i colori in molti client. Impostare esplicitamente color e background-color sui contenitori di testo evita disastri come testo nero su sfondo nero. Imposti sempre entrambe le proprietà.

Si attenga a px per le dimensioni. rem, vh e vw sono supportati in modo incoerente. Le percentuali funzionano sulle tabelle per i layout a larghezza intera; le larghezze assolute in pixel sulle tabelle e sulle celle interne vengono visualizzate in modo identico in tutti i client.

I web font tramite @font-face funzionano in Apple Mail, iOS Mail e Thunderbird, ma non in Outlook e Gmail. Utilizzi come valore inline uno stack di font compatibili con il web (Arial, Helvetica, sans-serif) e riservi @font-face esclusivamente come miglioramento progressivo per i client che lo supportano.

La proprietà inline background-image su un div funziona nei client moderni, ma viene ignorata da Outlook. Utilizzi bgcolor come fallback e il VML condizionale <v:rect> per Outlook, così ogni client visualizza uno sfondo equivalente, anche quando non è possibile ottenere una resa perfettamente fedele.

Gli stili inline possono apparire corretti nell'anteprima del browser, ma essere visualizzati diversamente in Gmail, Outlook o iOS Mail. Utilizzi Litmus, Email on Acid o le anteprime gratuite di Mailtrap per verificare ogni client principale prima di inviare la campagna.

Aggiunga un piccolo reset nel tag <style> (margin: 0 su body, line-height: 100% sulle tabelle, border: none sulle immagini) per neutralizzare gli stili predefiniti dei client. Lo racchiuda in una media query se desidera applicarlo solo dove <style> viene rispettato.

Perché le media query nelle email HTML richiedono !important per ogni proprietà?

Le email hanno bisogno di stili inline per superarare la rimozione degli stili da parte dei client, ma normalmente gli stili vengono definiti in <style> e inseriti inline in fase di build. Utilizzi !important nelle media query per superare la specificità degli stili inline, preferisca le proprietà in forma estesa rispetto alle proprietà abbreviate, imposti esplicitamente color e background-color, utilizzi esclusivamente unità px e testi nei client reali prima dell'invio.