Styles intégrés pour les courriels

De nombreux clients de messagerie, notamment Gmail sur le Web avant mai 2016 et plusieurs applications mobiles encore aujourd’hui, suppriment ou réécrivent les blocs <style> et les feuilles de style externes. Les attributs style="..." intégrés sont les seuls styles CSS dont la conservation est garantie dans tous les clients.

Écrire les styles intégrés manuellement n’est pas maintenable. Rédigez le courriel avec des balises <style> et des noms de classes normaux, puis exécutez un outil d’intégration (Juice, Premailer, mjml) lors de la construction pour copier chaque règle dans l’attribut style de l’élément correspondant avant la livraison.

Les styles intégrés ont la spécificité la plus élevée, à l’exception de !important. Une requête média qui souhaite remplacer une valeur intégrée doit utiliser !important pour chaque propriété, car la déclaration intégrée l’emporte sinon, quel que soit le contexte @media.

Les outils d’intégration copient uniquement les règles qui correspondent à des éléments individuels ; les blocs @media restent à l’intérieur de la balise <style> car ils ne peuvent pas être aplatis. Ce fonctionnement convient : Gmail et les autres clients qui suppriment ces blocs laissent les styles intégrés intacts, tandis que les clients qui respectent les balises <style> appliquent les requêtes média par-dessus.

Certains clients rencontrent des problèmes avec les raccourcis : font: 14px/1.4 Arial peut être entièrement ignoré. Utilisez la forme détaillée (font-family, font-size, line-height) afin que chaque propriété fonctionne ou échoue indépendamment.

Le mode sombre inverse automatiquement les couleurs dans de nombreux clients. Définir explicitement color et background-color sur les conteneurs de texte évite les catastrophes du type texte noir sur fond noir. Associez toujours les deux.

Tenez-vous-en à px pour les dimensions. rem, vh et vw sont prises en charge de manière incohérente. Les pourcentages fonctionnent sur les tableaux pour les mises en page pleine largeur ; les largeurs absolues en pixels sur les tableaux et cellules intérieurs s’affichent de manière identique dans tous les clients.

Les polices Web utilisant @font-face fonctionnent dans Apple Mail, iOS Mail et Thunderbird, mais échouent dans Outlook et Gmail. Utilisez une combinaison de polices compatible avec le Web comme valeur de style en ligne (Arial, Helvetica, sans-serif) et réservez @font-face uniquement comme amélioration progressive pour les clients qui la prennent en charge.

Une image d’arrière-plan appliquée en ligne à une div fonctionne dans les clients modernes, mais elle est ignorée par Outlook. Utilisez bgcolor comme solution de repli et un <v:rect> VML conditionnel pour Outlook afin que chaque client affiche un arrière-plan visuellement équivalent, même lorsqu’une fidélité parfaite est impossible.

Les styles en ligne peuvent sembler corrects dans l’aperçu d’un navigateur, mais s’afficher différemment dans Gmail, Outlook ou iOS Mail. Utilisez Litmus, Email on Acid ou les aperçus gratuits de Mailtrap pour vérifier chaque client majeur avant d’envoyer la campagne.

Ajoutez une petite réinitialisation dans la balise <style> (margin: 0 pour body, line-height: 100% pour les tableaux, border: none pour les images) afin de neutraliser les styles par défaut des clients. Encadrez-la dans une requête multimédia si vous souhaitez l’appliquer uniquement là où <style> est pris en charge.

Pourquoi les requêtes multimédias dans les e-mails HTML nécessitent-elles !important sur chaque propriété ?

Les e-mails ont besoin de styles en ligne pour résister à la suppression par les clients, mais vous rédigez normalement ces styles dans <style> avant de les appliquer en ligne lors de la compilation. Utilisez !important dans les requêtes multimédias pour surpasser la spécificité des styles en ligne, préférez les propriétés développées aux propriétés abrégées, définissez explicitement color et background-color, tenez-vous-en aux unités px et testez dans de vrais clients avant l’envoi.