Intégrer le CSS d’un e-mail
Outlook et plusieurs webmails ignorent ou suppriment un bloc <style>. L’intégration en ligne est l’étape ennuyeuse et mécanique entre une maquette qui marche dans un navigateur et une qui marche dans une boîte de réception.
- Fonctionne entièrement dans votre navigateur
- Fonctionne hors ligne
- Aucun envoi de fichier
- Sans inscription
- Sans filigrane
Chargement de l’outil…
Comment ça marche
- Collez le HTML avec son bloc <style>.
- Appuyez sur « Inline the CSS » (intégrer le CSS).
- Copiez ou téléchargez le résultat, et contrôlez-le dans l’aperçu ci-dessous.
Pourquoi rien n’est envoyé
Toutes les opérations de cette page sont effectuées par du code qui tourne dans l’onglet de votre navigateur, avec le moteur qui affiche les pages web. Le fichier est lu depuis le disque vers la mémoire de l’onglet, transformé sur place, puis réécrit sous forme de téléchargement. Il n’est jamais envoyé où que ce soit — ni à nous, ni à un tiers.
Vérifiez-le vous-même
- Ouvrez les outils de développement de votre navigateur (F12) et choisissez l’onglet « Réseau ».
- Chargez votre fichier et lancez l’outil.
- Les seules requêtes que vous verrez téléchargent le code de l’outil lui-même — et, pour quelques outils lourds, leur moteur open source depuis un CDN public — plus un petit signal de visite vers loreatec.jp (adresse et titre de la page, rien de plus). Aucune ne transporte votre fichier.
Questions fréquentes
Pourquoi les media queries ne peuvent-elles pas être mises en ligne ?
Parce qu’un style en ligne n’a aucune condition attachée : il s’applique toujours. Une media query est une condition, elle ne peut donc vivre que dans un bloc <style>. C’est pour cela qu’un e-mail responsive a besoin des deux : les styles en ligne pour la mise en page de base, et un bloc <style> pour l’affichage sur téléphone, en acceptant que les clients qui suppriment <style> montreront la version de base.
Que devient :hover ?
Même problème, même réponse : il reste dans le bloc <style>. Considérez les effets au survol comme un bonus pour les logiciels qui les gèrent, jamais comme quelque chose dont le message dépend.
Qui l’emporte : mon style en ligne existant ou la feuille de style ?
Le vôtre. Tout ce qui se trouve déjà dans un attribut style est conservé et placé après les règles venues de la feuille de style : il continue donc de les surcharger, exactement comme dans un navigateur.
Est-ce la même chose que ce que fait mon outil de newsletter ?
La plupart d’entre eux intègrent le CSS au moment de l’envoi, oui. Celui-ci sert quand vous confiez du HTML à quelqu’un d’autre, quand vous envoyez par une API, ou quand vous cherchez pourquoi une règle n’a pas survécu.