← Tous les articles

CSS dans les emails : quelles propriétés utiliser et lesquelles éviter

Par Mara Levin · Mis à jour le 7 octobre 2026

La réponse courte

Un client email n’est pas un navigateur, et la difficulté vient surtout d’Outlook pour Windows, qui ne reconnaît ni border-radius, ni display:flex, ni les images de fond en CSS, ni les media queries. Écrivez la mise en page en tableaux, mettez en style inline tout ce dont la lecture dépend, réservez le bloc <style> aux améliorations (media queries, survol) et prévoyez pour chaque effet un repli lisible. Les chiffres de ce guide viennent des données de caniemail.com, avec le lien vers la fiche à côté de chaque affirmation.

Support par client pour seize propriétés courantes

Propriété Gmail web Gmail iOS Outlook Windows Outlook.com Apple Mail macOS Yahoo web
paddingOuiOuiPartielOuiOuiOui
marginPartielPartielPartielPartielOuiPartiel
max-widthOuiOuiPartielOuiOuiOui
border-radiusOuiOuiNonOuiOuiPartiel
background-imageOuiOuiNonOuiOuiPartiel
display:flexOuiPartielNonOuiOuiOui
display:gridOuiPartielNonOuiOuiOui
positionNonNonNonPartielPartielPartiel
floatOuiPartielNonOuiOuiPartiel
@mediaPartielPartielNonPartielOuiPartiel
@font-faceNonNonPartielNonOuiNon
box-shadowNonPartielNonOuiOuiNon
linear-gradient()OuiOuiNonNonOuiNon
variables CSSNonNonNonNonOuiNon
:hoverOuiNonNonPartielOuiOui
unité remOuiOuiNonOuiOuiNon

Source : données caniemail.com mises à jour le 16 septembre 2026. Pour chaque client, la colonne reprend l’entrée la plus récente de la fiche ; « Outlook Windows » désigne les versions de bureau jusqu’à 2019 que listent les données. Les nuances (notes de bas de fiche) sont sur les fiches liées.

Ce que montre le tableau

Trois lignes se détachent. D’abord, la colonne Outlook Windows est presque entièrement négative, y compris pour des propriétés très répandues comme border-radius et background-image. Ensuite, Apple Mail est le client le plus complet, avec « Oui » partout sauf pour position qui reste partielle, ce qui explique pourquoi un email « parfait » dans l’aperçu du développeur se dégrade ailleurs. Enfin, beaucoup de réponses sont « partiel » : margin par exemple est signalé partiel partout sauf chez Apple Mail et Samsung Email, avec des notes précises (valeurs négatives non prises en charge, auto ignoré dans Outlook de bureau). Un « partiel » est une invitation à tester ce cas précis, pas à écarter la propriété.

Du réflexe web à l’équivalent email

Sur le web, on écrit Dans un email, on écrit Raison tirée des données
Deux colonnes en flexboxUn tableau à deux cellulesflex est « Non » dans Outlook Windows
Marges entre les blocspadding sur les cellules, margin:0 sur les titresmargin est partiel presque partout ; padding fonctionne sur les cellules
Tailles en remTailles en pxrem est « Non » dans Outlook Windows et Yahoo
Variables CSS pour la charteValeurs répétées, ou générées par l’outil de buildLes variables ne fonctionnent que dans Apple Mail et Samsung Email
Police personnalisée en @font-facePile de polices système en repli@font-face est « Non » dans Gmail et Outlook.com
Ombre portée sur une carteUne bordure fine de 1 pxbox-shadow n’est « Oui » que dans Apple Mail et Outlook.com
Dégradé en linear-gradientUne couleur unie, ou une imageNon dans Outlook, partiel ou non dans plusieurs autres
Hauteur fixe sur un divLaisser le contenu fixer la hauteurheight est partiel dans Outlook Windows, « Non » chez Yahoo

Où placer le CSS : inline, <style>, ou les deux

Le style inline est l’assurance : il suit l’élément et ne dépend pas de la façon dont le client traite l’en-tête. Il alourdit le code et se répète à chaque balise. Voici un paragraphe écrit ainsi :

<p style="margin: 0 0 16px 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; color: #2b2b2b;">
  Votre commande n° 4812 est en route.
</p>

Le bloc <style> garde le code lisible, mais la fiche sur l’élément style donne des limites concrètes : prise en charge partielle dans Gmail (webmail et applications) et absence en webmail mobile Gmail, balise non reconnue dans le body, une taille limitée à 16 Ko dans Gmail en webmail, et, pour Outlook de bureau, l’obligation de déclarer la balise avant d’utiliser ses règles. Gardez-y ce qui peut se perdre sans casser la lecture :

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .lien-suivi { color: #0b5fff; text-decoration: underline; }
    @media screen and (max-width: 600px) {
      .colonne { display: block !important; width: 100% !important; }
    }
  </style>
</head>
<body>
  <p><a class="lien-suivi" href="https://exemple.fr/suivi/4812">Suivre le colis</a></p>
</body>

Le réflexe le plus sûr est de combiner les deux : écrire les règles dans un bloc <style> pendant le développement, puis laisser un inliner recopier le nécessaire dans les attributs. Juice le fait côté Node, MJML inline les styles déclarés dans mj-style avec l’attribut inline="inline", et la plupart des éditeurs visuels l’intègrent à l’export :

const juice = require('juice');

const html = juice(sourceHtml); // les règles du <style> sont recopiées dans chaque attribut style

Un bouton qui tient dans tous les clients

Le bouton « bulletproof » est une cellule de tableau colorée qui contient un lien en inline-block. La couleur de fond est portée par la cellule (attribut bgcolor et style), le padding par le lien. Dans Outlook Windows, où padding n’est reconnu que sur les cellules de tableau d’après la fiche, la zone cliquable reste donc cohérente ; seul le coin arrondi disparaît.

<table role="presentation" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td bgcolor="#0b5fff" style="background-color: #0b5fff; border-radius: 6px;">
      <a href="https://exemple.fr/commande/4812"
         style="display: inline-block; padding: 14px 28px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; color: #ffffff; text-decoration: none;">
        Voir ma commande
      </a>
    </td>
  </tr>
</table>

Pour des angles arrondis dans Outlook de bureau, la fiche de border-radius renvoie vers l’élément VML roundrect et vers buttons.cm. Il vaut la peine d’y recourir pour un bouton d’appel à l’action de marque, beaucoup moins pour un lien secondaire.

Images d’arrière-plan : l’exception qui demande du VML

Dans Outlook pour Windows, background-image est « Non », et la fiche indique que le VML sert à poser une image de fond. Le motif ci-dessous combine l’attribut background, le style CSS et un bloc VML visible seulement d’Outlook ; la couleur de repli bgcolor garantit un contraste de lecture si l’image ne se charge pas. Les fiches de caniemail signalent aussi un cas où Gmail supprime l’attribut style entier quand une URL d’image est présente, une raison de plus de tester le message livré et non l’aperçu de l’éditeur.

<td background="https://exemple.fr/img/fond.jpg" bgcolor="#2b3a55" width="600" valign="top"
    style="background-image: url('https://exemple.fr/img/fond.jpg'); background-color: #2b3a55;">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
    <v:fill type="tile" src="https://exemple.fr/img/fond.jpg" color="#2b3a55" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div style="padding: 40px 30px; color: #ffffff;">Texte posé sur l'image</div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

Mise en page adaptative sans compter sur les media queries

Les media queries sont « Non » dans Outlook pour Windows et partielles ailleurs : la fiche de @media précise que Gmail ne les prend pas en charge pour un compte non Google, que les requêtes imbriquées sont retirées dans Outlook, et que Yahoo se limite à screen, min-width, max-width et leurs équivalents en hauteur. La bonne approche est donc de rendre la version étroite lisible par défaut : un tableau central à width:100% et max-width:600px, centré avec align="center" plutôt que margin:0 auto, car la fiche de margin note que la valeur auto n’est pas reconnue dans Outlook de bureau. Le bloc media query de l’exemple plus haut n’est alors qu’un confort pour les clients qui le lisent. D’autres techniques sont détaillées dans le guide du responsive.

Polices : une pile soignée vaut mieux qu’une police importée

D’après caniemail.com, @font-face fonctionne dans Apple Mail et Samsung Email, partiellement dans Outlook pour Windows (la déclaration est reconnue, les polices distantes sont ignorées) et pas dans Gmail ni Outlook.com. La fiche signale aussi que, dans les versions 2007 à 2016 d’Outlook de bureau, un élément qui utilise une police déclarée en @font-face peut ignorer la pile et retomber sur Times New Roman. Écrivez donc la pile en pensant d’abord au repli :

font-family: 'Source Sans 3', 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;

Gardez des tailles en px pour font-size : la fiche de cette propriété note que rem n’est pas reconnu dans Outlook de bureau, et la fiche de l’unité rem confirme le « Non » pour Outlook Windows et Yahoo. Pour line-height, la fiche signale un comportement erratique des unités em et px dans Outlook de bureau, avec mso-line-height-rule:exactly comme contournement.

Une feuille de remise à zéro minimale

Ce bloc, courant dans les modèles, neutralise des comportements propres à certains clients (agrandissement automatique du texte, espaces ajoutés aux tableaux par Outlook, bordures autour des images). Les propriétés préfixées mso- et -ms- ne concernent qu’Outlook et Windows ; les autres clients les ignorent.

<style>
  body, table, td, p, a, li { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
  img { border: 0; display: block; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
  body { margin: 0; padding: 0; width: 100% !important; }
</style>

Quand l’affichage ne correspond pas à l’aperçu

  1. Commencez par le client fautif. Repérez quel client casse la mise en page, puis cherchez la propriété dans le tableau ci-dessus ou sur caniemail.com.
  2. Regardez le HTML reçu, pas votre source. Envoyez le message à une adresse de test et ouvrez le code : l’ESP et le client ont pu retirer ou réécrire des règles.
  3. Retirez les règles une à une jusqu’à ce que le défaut disparaisse, puis réintroduisez-les avec un repli.
  4. Vérifiez la précédence. Un style inline l’emporte sur une règle du <style> ; c’est pourquoi les surcharges de media query portent !important, que la fiche signale comme partiellement pris en charge dans Gmail et Outlook de bureau (casse et espaces avant le mot-clé).

Pour les cas où la couleur change selon le mode d’affichage, lisez l’article sur le mode sombre. Pour choisir l’outil qui génère ce code à votre place, comparez MJML et React Email ou parcourez le guide des constructeurs d’emails.

Questions fréquentes

Peut-on utiliser flexbox ou grid dans un email ?

Oui pour une partie des destinataires, non pour tous. Selon caniemail.com, display:flex et display:grid fonctionnent dans Apple Mail, Outlook.com et Gmail en webmail, sont partiels dans les applications Gmail (non pris en charge avec un compte non Google) et ne fonctionnent pas dans Outlook pour Windows. Tant que cette version d'Outlook compte dans votre liste, les tableaux restent la seule mise en page sûre.

Pourquoi mes coins arrondis disparaissent-ils dans Outlook ?

Outlook pour Windows ignore border-radius. caniemail.com renvoie vers VML (l'élément roundrect) pour reproduire des angles arrondis, mais pour un simple bouton on accepte le plus souvent le coin carré, d'où le repli en couleur de fond unie dans l'exemple ci-dessus.

Une police personnalisée s'affichera-t-elle dans Gmail ?

Non. caniemail.com indique @font-face comme non pris en charge dans Gmail (webmail et applications) et dans Outlook.com ; Apple Mail et Samsung Email l'acceptent, et Outlook pour Windows le fait de façon partielle. Prévoyez donc une pile de polices système qui garde une mise en page correcte sans la police personnalisée.

Faut-il tout mettre en style inline ?

Ce qui conditionne la lecture (couleurs, tailles, espacements des cellules) oui. Les media queries et les améliorations facultatives vont dans le <style>, qui est pris en charge de façon partielle par Gmail et ignoré dans certains cas, comme le rappelle la fiche sur l'élément style. Un inliner comme Juice fait la conversion à la compilation.