← Tous les articles
· 13 min de lecture

CSS dans les emails : Ce que vous pouvez et ne pouvez pas faire

La réalité pratique du style des emails HTML avec CSS.

Le CSS dans les emails est un sous-ensemble contraint du CSS dans les navigateurs. Les propriétés que vous utilisez quotidiennement en développement web peuvent ne pas fonctionner dans les clients email. Ce guide documente ce qui est sûr, ce qui nécessite des solutions de contournement, et ce qu’il faut éviter complètement.

Si vous voulez éviter les limitations CSS, des constructeurs visuels comme Sequenzy génèrent du code compatible automatiquement. Mais comprendre le CSS dans les emails vous aide à déboguer les problèmes et à prendre des décisions éclairées.

Styles inline vs embarqués

Styles inline (les plus fiables)

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

Les styles inline fonctionnent dans tous les clients email. Ils ont la spécificité la plus élevée et ne peuvent pas être supprimés. Le désavantage : code verbeux et pas de réutilisation sans duplication.

Styles embarqués (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>

Les styles embarqués fonctionnent dans la plupart des clients mais Gmail les a historiquement supprimés dans certains contextes. Utilisez-les pour des améliorations (media queries) mais pas pour des styles critiques.

Meilleure pratique : les deux

Utilisez les styles inline pour le rendu critique. Utilisez les styles embarqués pour les media queries et l’amélioration progressive. Les outils d’inlining CSS automatisent cette conversion.

CSS de typographie

Propriétés de police sûres

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;

Tous les clients majeurs supportent ces propriétés. Collez aux unités px pour font-size (em/rem moins fiables). Évitez les valeurs font-weight autres que normal (400) et bold (700).

Polices web

<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>

Les polices web fonctionnent dans Apple Mail, iOS, et certains clients Android. Gmail et Outlook utilisent le fallback. Incluez toujours un fallback web-safe.

CSS du modèle de boîte

Padding (sûr sur les cellules de tableau)

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

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

Le padding sur les cellules de tableau est fiable. Sur les divs et paragraphes, les résultats varient. En cas de doute, utilisez les cellules de tableau.

Margin (utiliser avec précaution)

Les marges sont incohérentes, surtout dans Outlook. Préférez le padding sur les cellules conteneuses plutôt que les marges sur le contenu.

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

Largeur et hauteur

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

La largeur fonctionne de manière fiable. max-width est utile pour les emails responsifs mais Outlook l’ignore (utilisez des commentaires conditionnels pour une largeur fixe Outlook). La hauteur doit être évitée car le contenu doit déterminer la hauteur.

CSS d’arrière-plan

Couleur d’arrière-plan (sûre)

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

Images d’arrière-plan (complexes)

<!-- 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]-->

Les images d’arrière-plan nécessitent VML pour le support Outlook. Incluez toujours un fallback background-color.

CSS de bordure

Bordures solides (sûres)

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

Border Radius (pas Outlook)

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

Border-radius fonctionne dans la plupart des clients mais Outlook affiche des coins carrés. Pour les boutons, c’est généralement acceptable. Pour des designs arrondis critiques, utilisez des images.

CSS de mise en page

Propriété Display

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

Les valeurs display basiques fonctionnent. display: flex et display: grid NE FONCTIONNENT PAS dans les emails. Utilisez des tableaux pour la mise en page.

Position (éviter)

Le positionnement CSS (absolute, relative, fixed) ne fonctionne pas de manière fiable. Utilisez une mise en page basée sur tableaux à la place.

Float (éviter)

Les floats sont peu fiables dans Outlook. Utilisez des colonnes de tableau pour le contenu côte à côte.

Requêtes média

@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;
  }
}

Les requêtes média fonctionnent dans Apple Mail, iOS, Gmail App. Elles NE FONCTIONNENT PAS dans Outlook ou Gmail web (de manière fiable). Utilisez !important pour surcharger les styles inline.

Reset CSS pour les emails

<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

Les outils convertissent les styles embarqués en styles inline pour la fiabilité :

  • Juice : Bibliothèque Node.js pour l’inlining CSS
  • Premailer : Outil en ligne et gem
  • MJML : Gère l’inlining pendant la compilation
  • Constructeurs d’emails : Sequenzy et autres inline automatiquement

Débogage des problèmes CSS

  1. Vérifiez d’abord les styles inline. Les styles inline manquants ou incorrects sont le problème le plus courant.
  2. Testez dans Outlook. Si le CSS fonctionne dans Outlook, il fonctionne probablement partout.
  3. Simplifiez. Supprimez le CSS jusqu’à ce que le problème disparaisse, puis ajoutez progressivement.
  4. Vérifiez la spécificité. Les styles inline peuvent surcharger vos styles embarqués.

Le mot de la fin

Le CSS dans les emails est un langage contraint. Collez aux propriétés bien supportées, utilisez les styles inline pour le rendu critique, et testez sur tous les clients. Les frameworks et constructeurs comme Sequenzy gèrent ces contraintes automatiquement.

Les limitations sont frustrantes si vous êtes habitué au CSS web moderne. Mais les comprendre vous permet de construire des emails qui s’affichent de manière cohérente sur tous les clients email capricieux utilisés par vos destinataires.