CSS inliner
À quoi sert vraiment un CSS inliner
L’e-mail n’est pas un onglet de navigateur. Gmail, Outlook, Orange Mail, La Poste Numérique et la plupart des aperçus d’ESP appliquent leurs propres règles sur le CSS pris en charge. Un `<link rel="stylesheet">` vers votre feuille de marque est souvent ignoré. Un bloc `<style>` dans le `<head>` passe chez certains clients et disparaît chez d’autres. Ce qui reste le plus fiable, ce sont des attributs `style` sur les balises concernées. Un CSS inliner vous laisse garder la structure en HTML et les règles en CSS comme sur le web, puis applique en une passe les déclarations sur chaque élément. Le fichier collé dans Mailchimp, Brevo ou votre pipeline transactionnel reste du HTML, sans dépendre du chargement d’une feuille de style séparée. Cette page vise la dernière étape avant envoi : HTML et CSS dans des onglets distincts (ou import .html + .css), bouton « Inliner le CSS », résultat à droite. Quand c’est bon, copiez, téléchargez, ou ouvrez « Aperçu HTML » sur le playground d’accueil pour parcourir la mise en page avant un envoi test.
Feuille externe et CSS intégré — pas une seule source
Beaucoup d’inliners en ligne supposent que le CSS est déjà dans le HTML — en général un `<style>` exporté depuis un outil de design. Dès que le projet est découpé normalement — `template.html` plus `styles.css` après build, livraison Figma ou générateur statique — il faut fusionner à la main ou lancer un CLI dont vous n’avez besoin que deux fois par an. Notre CSS inliner traite les deux cas à égalité : balisage dans l’onglet HTML, règles dans l’onglet CSS, ou import de deux fichiers (`.html` et `.css`). Le CSS de l’onglet s’applique avec les blocs `<style>` déjà présents. La sortie est du HTML avec attributs `style` inline ; les balises `<style>` sont retirées — ce que la plupart des workflows e-mail attendent. Cela compte pour newsletters et e-mails transactionnels : typo et boutons dans un CSS partagé, fragments HTML par auteur. Sans lecture du CSS externe, vous bloquez dès que le dépôt ressemble à un vrai projet.
Le traitement se fait dans le navigateur après chargement — pas de compte, pas d’upload. `:hover`, `::before` et sélecteurs non résolus sont ignorés et listés dans « Notes ». Les `@media` simples sont aplatis ; le responsive en boîte de réception reste différent du web — testez toujours sur les clients cibles. Pour vérifier espacements ou classes : « Aperçu HTML » envoie le résultat inliné vers le playground d’accueil — utile avant le collage dans l’ESP.
Ouvrir le CSS inlinerOnglets HTML + CSS
Structure et présentation séparées comme dans un dépôt. Quand c’est prêt, inlinez et produisez la version d’envoi.
Deux fichiers d’un coup
Importez .html et .css ensemble — moins de risque de collage tronqué.
Aperçu sur l’accueil
HTML inliné dans un nouvel onglet du playground avant collage dans l’ESP.
CSS inliner e-mail avec feuilles de style externes
La plupart des outils ne réécrivent que le CSS déjà intégré au HTML. Ici, fichier .css séparé et balises <style> dans le markup — en une passe — puis copie, téléchargement ou aperçu.
Un .css externe sans fusion manuelle préalable
Si `email.css` vit à côté de `template.html`, importez ou collez dans les deux onglets. Les sélecteurs sont mappés vers des attributs `style` — le format attendu par les clients mail. Pas besoin de fusionner la feuille dans le document avant d’inliner. Les `<style>` dans le HTML passent dans le même traitement. À droite, le HTML inliné complet en lecture seule. Copie via l’icône de l’en-tête de sortie, téléchargement `inlined.html`, « Aperçu HTML » pour le playground. Tout reste local.
- Onglet CSS dédié, structure de projet réelle
- CSS externe + <style> en une passe
- Notes sur les règles ignorées
- Local dans le navigateur, sans upload
Inliner le CSS d’un template e-mail HTML
Ajoutez HTML et CSS
Le modèle dans l’onglet HTML. Boutons, typo, utilitaires dans l’onglet CSS — ou import .html + .css. Un `<style>` dans le head peut rester : il sera inliné aussi.
Lancez « Inliner le CSS »
Les règles correspondantes deviennent des attributs style. Consultez « Notes » pour les exclusions. À gauche vous continuez à éditer, à droite le résultat — relancez si besoin.
Vérifiez, puis envoyez
Copiez, enregistrez ou aperçu sur le playground d’accueil. Collez dans l’ESP, testez sur Gmail et Outlook, gardez le .html validé.
FAQ CSS inliner
Prochain envoi : CSS déjà inliné ?
Collez le HTML, ajoutez CSS externe ou intégré, inlinez. Comparez avec une boîte de test, puis enregistrez ou copiez.
CSS inliner
- .css externe et HTML en un passage
- Blocs <style> intégrés inclus
- Aperçu HTML sur le playground d’accueil
- No signup; use the tool in the browser
Après inlining, envoyez un vrai test — les clients mail surprennent toujours l’aperçu.
Un HTML pour l’ESP
Inlinez une fois, collez la campagne, archivez la version validée.