← Tutti gli Articoli
· 13 min di lettura

CSS nelle email: Cosa puoi e non puoi fare

La realtà pratica dello styling delle email HTML con CSS.

Il CSS nelle email è un sottoinsieme limitato del CSS nei browser. Le proprietà che usi quotidianamente nello sviluppo web potrebbero non funzionare nei client email. Questa guida documenta cosa è sicuro, cosa richiede workaround e cosa evitare completamente.

Se vuoi saltare le limitazioni CSS, builder visivi come Sequenzy generano codice compatibile automaticamente. Ma comprendere il CSS nelle email ti aiuta a debuggare problemi e prendere decisioni informate.

Stili Inline vs Incorporati

Stili Inline (Più Affidabili)

<p style="color: #333333; font-size: 16px; line-height: 1.5;">
  Text with inline styles
</p>

Gli stili inline funzionano in tutti i client email. Hanno la specificità più alta e non possono essere rimossi. Lo svantaggio: codice verboso e nessuna riusabilità senza duplicazione.

Stili Incorporati (Head)

<head>
  <style>
    .text-body {
      color: #333333;
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <p class="text-body">Text with class</p>
</body>

Gli stili incorporati funzionano nella maggior parte dei client ma Gmail li ha storicamente rimossi in certi contesti. Usali per miglioramenti (media query) ma non per stili critici.

Migliore Pratica: Entrambi

Usa stili inline per il rendering critico. Usa stili incorporati per media query e progressive enhancement. Tool CSS inliner automatizzano questa conversione.

CSS Tipografia

Proprietà Font Sicure

font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold; /* or 700 */
font-style: italic;
color: #333333;
line-height: 1.5; /* or 24px */
text-align: left; /* center, right */
text-decoration: none; /* underline */
text-transform: uppercase; /* lowercase */
letter-spacing: 1px;

Tutti i principali client supportano queste proprietà. Attieniti alle unità px per font-size (em/rem meno affidabili). Evita valori font-weight diversi da normal (400) e bold (700).

Web Font

<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

<p style="font-family: 'Roboto', Arial, sans-serif;">
  Custom font with fallback
</p>

Le web font funzionano in Apple Mail, iOS e alcuni client Android. Gmail e Outlook usano il fallback. Includi sempre un fallback web-safe.

CSS Box Model

Padding (Sicuro sulle Celle Tabella)

<td style="padding: 20px;">
  Content with padding
</td>

<!-- Or individual sides -->
<td style="padding-top: 20px; padding-bottom: 10px;">
  Content
</td>

Il padding sulle celle tabella è affidabile. Su div e paragrafi, i risultati variano. In caso di dubbio, usa celle tabella.

Margin (Usa con Cura)

I margin sono inconsistenti, specialmente in Outlook. Preferisci padding su celle contenitore rispetto a margin sul contenuto.

<!-- Instead of margin on heading -->
<td style="padding-bottom: 20px;">
  <h1 style="margin: 0;">Heading</h1>
</td>

Larghezza e Altezza

width: 600px;
width: 100%;
max-width: 600px;
height: 200px; /* Avoid when possible */

La larghezza funziona in modo affidabile. max-width è utile per email responsive ma Outlook lo ignora (usa commenti condizionali per larghezza fissa Outlook). L’altezza va evitata poiché il contenuto dovrebbe determinarla.

CSS Sfondo

Colore Sfondo (Sicuro)

background-color: #f5f5f5;
background: #f5f5f5; /* shorthand works too */

Immagini Sfondo (Complesso)

<!-- Works in most clients, NOT Outlook -->
<td style="background-image: url('image.jpg'); background-color: #333;">

<!-- For Outlook, use VML -->
<!--[if gte mso 9]>
<v:rect style="width:600px;height:300px;" stroke="false" fill="true">
<v:fill type="tile" src="image.jpg" />
<v:textbox>
<![endif]-->

<div style="background-image: url('image.jpg');">
  Content
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

Le immagini di sfondo richiedono VML per il supporto Outlook. Includi sempre un fallback background-color.

CSS Bordi

Bordi Solidi (Sicuri)

border: 1px solid #cccccc;
border-bottom: 2px solid #333333;
border-top: none;

Border Radius (No Outlook)

border-radius: 4px; /* Ignored in Outlook */

Border-radius funziona nella maggior parte dei client ma Outlook mostra angoli squadrati. Per i pulsanti, è solitamente accettabile. Per design arrotondati critici, usa immagini.

CSS Layout

Proprietà Display

display: block;
display: inline;
display: inline-block;
display: none;

I valori display base funzionano. display: flex e display: grid NON funzionano nelle email. Usa tabelle per il layout.

Position (Evita)

Il posizionamento CSS (absolute, relative, fixed) non funziona in modo affidabile. Usa layout basato su tabelle invece.

Float (Evita)

I float sono inaffidabili in Outlook. Usa colonne tabella per contenuto side-by-side.

Media Query

@media screen and (max-width: 600px) {
  .mobile-full {
    width: 100% !important;
    display: block !important;
  }
  .mobile-hide {
    display: none !important;
  }
  .mobile-text-center {
    text-align: center !important;
  }
}

@media (prefers-color-scheme: dark) {
  .dark-bg {
    background-color: #1a1a1a !important;
  }
}

Le media query funzionano in Apple Mail, iOS, Gmail App. NON funzionano in Outlook o Gmail web (in modo affidabile). Usa !important per sovrascrivere stili inline.

CSS Reset per Email

<style>
  /* Prevent text size adjustment */
  body, table, td, p, a, li {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  /* Remove table spacing */
  table, td {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
  }

  /* Remove image borders and gaps */
  img {
    -ms-interpolation-mode: bicubic;
    border: 0;
    display: block;
    outline: none;
    text-decoration: none;
  }

  /* Reset body */
  body {
    margin: 0;
    padding: 0;
    width: 100% !important;
    height: 100% !important;
  }
</style>

Inlining CSS

Tool convertono stili incorporati in inline per affidabilità:

  • Juice: libreria Node.js per inlining CSS
  • Premailer: tool online e gem
  • MJML: gestisce inlining durante la compilazione
  • Email builder: Sequenzy e altri inline automaticamente

Debugging Problemi CSS

  1. Controlla prima gli stili inline. Stili inline mancanti o errati sono il problema più comune.
  2. Testa in Outlook. Se il CSS funziona in Outlook, probabilmente funziona ovunque.
  3. Semplifica. Rimuovi CSS finché il problema non scompare, poi aggiungi gradualmente.
  4. Controlla la specificità. Gli stili inline potrebbero sovrascrivere quelli incorporati.

In Breve

Il CSS nelle email è un linguaggio limitato. Attieniti a proprietà ben supportate, usa stili inline per rendering critico e testa su client. Framework e builder come Sequenzy gestiscono queste limitazioni automaticamente.

Le limitazioni sono frustranti se sei abituato al CSS web moderno. Ma comprenderle ti permette di costruire email che rendono consistentemente su tutti i client email stravaganti usati dai tuoi destinatari.