CSS inliner : passez le CSS de votre email en inline
Collez un HTML d'email avec sa balise <style> et récupérez le même HTML, styles recopiés sur chaque élément. Les media queries sont conservées. Gratuit, sans inscription.
Marre d'inliner à chaque modification ?
Dans MailBuildr, vous composez l'email en blocs et le HTML exporté est déjà en tableaux, avec le CSS inline. Plus rien à convertir.
Pourquoi inliner le CSS d'un email ?
Sur une page web, le CSS vit dans une feuille de style. Dans un email, cette habitude se paie : les messageries filtrent le code qu'elles reçoivent, et Gmail écarte toute la balise <style> dans plusieurs situations. L'email arrive alors sans couleurs, sans marges, avec des liens bleus soulignés.
Un style écrit directement dans l'attribut style d'un élément, lui, n'est supprimé par aucune messagerie. Inliner, c'est donc mettre ses styles à l'abri. À la main, c'est des centaines de déclarations à recopier ; avec un inliner, une seconde.
Le détail, messagerie par messagerie, est dans notre guide CSS inline dans les emails HTML.
Ce que fait l'inliner, et ses limites
Ce que l'outil fait
- Recopie les règles des balises <style> dans l'attribut style des éléments visés.
- Respecte la cascade CSS et garde la priorité aux styles inline déjà présents.
- Conserve media queries, :hover et @font-face dans une balise <style>.
- Reporte width et height en attributs sur les tableaux et images, pour Outlook.
Ce qu'il ne fait pas
- Convertir une mise en page flexbox ou grid en tableaux.
- Vérifier que chaque propriété est supportée par les messageries.
- Télécharger les feuilles de style externes (<link>, @import).
- Conserver votre code : il est converti puis oublié.
Questions fréquentes sur le CSS inliner
À quoi sert un CSS inliner ?
Il recopie les règles CSS d'une balise <style> dans l'attribut style de chaque élément HTML concerné. Les messageries filtrent les balises <style>, parfois en entier, alors que les styles inline sont conservés partout : un email inliné garde sa mise en forme.
Ce CSS inliner est-il gratuit ?
Oui, gratuit et sans création de compte. Le HTML est envoyé à notre serveur le temps de la conversion, puis oublié : il n'est ni enregistré ni analysé. La taille est limitée à 300 000 caractères par conversion.
Que deviennent les media queries ?
Elles ne peuvent pas être inline par nature. L'outil les conserve dans une balise <style>, avec les règles :hover et @font-face. Tout le reste est recopié sur les éléments, puis retiré de la balise.
Quelle différence avec le CSS inliner de Mailchimp ?
Le principe est le même : coller un HTML, récupérer le même HTML avec le CSS en attributs style. Cet outil conserve les media queries dans une balise <style>, reporte les largeurs et hauteurs en attributs pour Outlook, et signale les feuilles de style externes qui seront ignorées.
Mon email s'affichera-t-il bien partout après conversion ?
Pas forcément. Inliner règle la disparition des styles, pas leur compatibilité : un display:flex inline reste ignoré par Outlook pour Windows. Vérifiez ensuite le rendu dans le simulateur d'email et le code dans le vérificateur de compatibilité.
Les feuilles de style externes sont-elles prises en compte ?
Non. Les balises <link rel="stylesheet"> et les @import ne sont pas téléchargés, et aucune messagerie ne les charge non plus. Copiez leur contenu dans une balise <style> avant de lancer la conversion.
Pour aller plus loin
Simulateur d'email HTML
Collez votre code HTML et voyez-le s'afficher en direct dans une boîte de réception Gmail ou Outlook, en largeur ordinateur ou mobile.
Vérificateur de compatibilité email
Analyse le code de votre email et signale les balises et propriétés CSS mal supportées par Gmail, Outlook, Apple Mail et Yahoo.
Analyse anti-spam du contenu
Repère dans votre HTML les signaux qui alertent les filtres : mots à risque, ratio texte/image, liens raccourcis, poids, lien de désinscription absent.
CSS inline dans les emails HTML
Ce que chaque messagerie fait de votre CSS, et pourquoi l'inliner.
Template HTML pour Mailchimp
Coller un HTML déjà inline dans un template codé Mailchimp.
Comment ça marche
Collez votre HTML
Le code complet de l'email, avec ses règles CSS dans une ou plusieurs balises <style>.
Cliquez sur « Inliner le CSS »
Chaque règle est recopiée dans l'attribut style des éléments qu'elle vise, en respectant la cascade et les styles inline déjà présents.
Copiez ou téléchargez le résultat
Collez le HTML obtenu dans votre outil d'envoi, ou téléchargez-le en fichier .html.