CSS inline dans les emails HTML : pourquoi et comment inliner son CSS

Votre email est parfait dans le navigateur. Une fois reçu dans Gmail ou Outlook, les couleurs ont disparu, les marges ont sauté et le bouton est redevenu un lien bleu. La cause est presque toujours la même : le CSS est resté dans une balise <style>, comme sur une page web.

Ce guide explique ce qu'est le CSS inline, ce que les messageries font réellement de vos styles, et comment inliner un email HTML sans le faire à la main.

1. Qu'est-ce que le CSS inline ?

Le CSS inline consiste à écrire les déclarations de style directement dans l'attribut style de chaque élément, au lieu de les regrouper dans une feuille de style ou une balise <style>.

CSS dans une balise style (fragile dans un email) :

• <style> h1 { color: #d9480f; font-size: 24px; } </style>
• <h1>Titre</h1>

CSS inline (conservé partout) :

• <h1 style="color: #d9480f; font-size: 24px;">Titre</h1>

Le résultat visuel est identique. La différence est que le style voyage avec l'élément : même si la messagerie supprime tout le reste, il s'applique encore.

2. Pourquoi les messageries filtrent le CSS

Un webmail affiche votre email à l'intérieur de sa propre page. Si vos règles CSS s'appliquaient librement, un simple a { color: red } repeindrait toute l'interface de Gmail. Chaque messagerie nettoie donc le code qu'elle reçoit, à sa manière :

• Elle réécrit ou restreint les sélecteurs, pour que vos règles ne touchent que votre email.
• Elle supprime ce qu'elle ne connaît pas : une propriété non reconnue peut faire tomber toute la balise <style>.
• Elle ignore les feuilles de style externes : aucun client mail ne charge un <link rel="stylesheet">.

L'attribut style, lui, ne peut pas déborder de son élément. C'est pourquoi il est le seul à passer partout.

3. Ce que chaque messagerie conserve

• Gmail (web et applications) : accepte une balise <style> dans le <head>, mais l'écarte entièrement si elle est trop volumineuse (au-delà d'environ 8 000 caractères) ou si elle contient une règle qu'il ne reconnaît pas.
• Application Gmail avec un compte non Google (adresse professionnelle ou autre fournisseur ajoutée dans l'app) : support du <style> très limité. Le CSS inline y est indispensable.
• Outlook pour Windows : lit la balise <style>, mais son moteur, celui de Word, ignore une grande partie des propriétés CSS, inline ou non.
• Outlook.com et nouvel Outlook : bon support, avec des sélecteurs réécrits.
• Apple Mail (Mac, iPhone, iPad) : excellent support, balises <style> et media queries comprises.
• Yahoo Mail : accepte la balise <style> avec des restrictions sur les sélecteurs.

4. Inliner le CSS à la main

Sur le papier, l'opération est simple :

1. Repérer chaque règle de la balise <style>.
2. Trouver tous les éléments visés par son sélecteur.
3. Recopier ses déclarations dans l'attribut style de chacun.
4. Respecter la cascade : en cas de conflit, la règle la plus spécifique l'emporte.
5. Laisser dans la balise <style> ce qui ne peut pas être inline, comme les media queries.

5. Les outils pour inliner automatiquement

Un inliner prend un HTML avec sa balise <style> et rend le même HTML, styles recopiés sur chaque élément.

• CSS inliner MailBuildr : gratuit, en ligne, sans inscription. Il conserve les media queries et signale les feuilles de style externes.
• Juice (Node.js) : la bibliothèque la plus répandue, à intégrer dans une chaîne de build.
• Premailer (Ruby) : très utilisé dans l'écosystème Rails.
• CSS Inliner de Mailchimp : un outil en ligne, pratique pour un email ponctuel.
• Votre outil d'envoi : certains, dont Mailchimp, inlinent le CSS au moment de l'envoi. D'autres transmettent le code tel quel. Voyez nos fiches Mailchimp et Brevo.

Ce qu'un inliner ne fait pas

• Il recopie les règles sans vérifier qu'elles sont supportées : un display: flex inline reste ignoré par Outlook.
• Il ne transforme pas une mise en page web en tableaux.
• Il ne peut pas inliner les media queries, les pseudo-classes comme :hover ni les pseudo-éléments.

6. Ce que le CSS inline ne règle pas

Inliner répond à un seul problème : la suppression des styles. Il reste les propriétés que les messageries n'appliquent pas, où qu'elles soient écrites :

• display: flex et grid : ignorés par Outlook pour Windows. La mise en page doit reposer sur des tableaux.
• position: absolute ou fixed : à éviter partout.
• background-image : ignoré par Outlook pour Windows sans code VML.
• Animations et transitions : limitées à quelques messageries.
• Polices web : remplacées par une police système dans la plupart des cas, prévoyez toujours un repli.

Pour ne plus avoir à y penser, construisez l'email dans un éditeur d'email HTML qui écrit directement des tableaux et du CSS inline : il n'y a alors plus rien à inliner ni à convertir.

7. Vérifier le résultat

Un CSS correctement inline ne garantit pas un bon rendu : il faut regarder. Collez votre HTML dans le simulateur d'email pour le voir dans une boîte Gmail ou Outlook, sur ordinateur puis sur mobile. Le vérificateur de compatibilité liste ensuite les propriétés à risque qui restent dans le code.

Pour la méthode complète, de l'aperçu à l'envoi de test, lisez tester un email HTML avant l'envoi.

8. FAQ