Style de messagerie HTML pour Gmail

99

Je génère un e-mail html qui utilise une feuille de style interne, c'est-à-dire

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

Lorsqu'ils sont affichés dans Gmail, il semble que tous les styles de la feuille de style interne sont ignorés. Il semble que Gmail ignore tous les styles autres que les règles en ligne, par exemple

 <h2 style="color: red">Email content here</foo>

Est-ce ma seule option pour styliser les e-mails HTML lorsqu'ils sont affichés avec Gmail?

html css gmail html-email Dónal
la source
14
Oui, c'est le seul car de nombreux clients de messagerie Web ne reconnaissent pas les feuilles de style internes. En fait, le style en ligne est la méthode recommandée pour concevoir des newsletters html.
Mike
Pour autant que je sache, on peut s'attendre à ce que les lecteurs de courrier électronique prennent en charge html 3.2 et css 1.1.
Comment avez-vous généré votre email? Je veux dire, vous ajoutez le code de création de l'intention?
RaphMclee
7
Il est généralement bon d'utiliser une <html>balise d' ouverture ;)
Zaz
1
Gmail est nul. Application iOS et application Web aussi!
Adrian Florescu

Réponses:

19

Les réponses ici sont obsolètes, au 30 septembre 2016. Gmail est actuellement en train de déployer la prise en charge de la stylebalise dans le head, ainsi que les requêtes multimédias. Si Gmail est votre seule préoccupation, vous pouvez utiliser en toute sécurité des classes comme un développeur moderne!

Pour référence, vous pouvez consulter les documents CSS officiels de gmail .

En remarque, Gmail était le seul client majeur à ne pas prendre en charge style( référence , jusqu'à ce qu'ils se mettent à jour de toute façon). Cela signifie que vous pouvez presque en toute sécurité arrêter de mettre des styles en ligne. Certains des clients les plus obscurs peuvent encore en avoir besoin.

Matthew Johnson
la source
1
Il semble que cela ne fonctionne toujours pas. Nous l'avons essayé dans Litmus, mais cela ne fonctionne pas. Y a-t-il une raison particulière?
Arian
@ArianHosseinzadeh Qu'est-ce qui ne fonctionne pas? Ajout d'une référence à leur documentation sur la question.
Matthew Johnson
Nous l'avons essayé dans Litmus, et il ignore les styles non en ligne. Avez-vous essayé <style> pour Gmail après l'avoir annoncé? cela a-t-il fonctionné?
Arian
1
@ArianHosseinzadeh J'ai fait un copier-coller de leur exemple dans leur documentation, et je l' ai parcouru via putmail . Les styles s'affichent dans Gmail. J'ai vérifié l'application Gmail Android et Gmail dans un navigateur Chrome. Je suppose que les aperçus de Litmus n'ont pas été mis à jour pour refléter le changement.
Matthew Johnson
1
Je me demandais pourquoi mes styles ne fonctionnaient pas et je me suis rendu compte que je les avais placés dans la bodybalise au lieu de la headbalise.
palswim
67

Utilisez des styles en ligne pour tout. Ce site convertira vos classes en styles en ligne: http://premailer.dialect.ca/

sous-état
la source
2
Ce site est génial. Affiche des avertissements et vous donne une sortie de texte brut ainsi que la refonte de votre HTML.
jamesbar2
1
Ce Premailer est en Ruby, source: github.com/premailer/premailer . Il y en a un autre en Python: premailer.io source: github.com/peterbe/premailer , les deux sont open source.
Maxime R.
1
Cette réponse n'est plus exacte. gmail prend en charge les styles et les classes et a des documents officiels sur le sujet - voir la réponse de Matthew Johnson ci-dessous.
mikemaccana
12

Gmail a commencé la prise en charge de base des balises de style dans la zone d'en-tête. Je n'ai encore rien trouvé d'officiel mais vous pouvez facilement l'essayer vous-même.
Il semble ignorer les sélecteurs de classe et d'identifiant, mais les sélecteurs d'éléments de base fonctionnent.

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

il créera une balise de style dans sa propre zone d'en-tête limitée au div contenant le corps du courrier

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>
fuchs777
la source
Il ne prend toujours pas en charge les requêtes multimédias, ce qui est un peu dommage. Les classes et les identifiants sont aussi utiles :)
Eoin
2
Ils effectuent désormais des requêtes multimédias également et une prise en charge plus complète du style css. stackoverflow.com/questions/39759764/…
crowmagnumb
7

Je suis d'accord avec tous ceux qui prennent en charge les classes ET les styles en ligne. Vous l'avez peut-être déjà appris, mais s'il y a une seule erreur dans votre feuille de style, Gmail l'ignorera.

Vous pourriez penser que votre CSS est parfait, parce que vous l'avez fait si souvent, pourquoi aurais-je des erreurs dans mon CSS? Exécutez-le via le validateur CSS (par exemple http://www.css-validator.org/ ) et voyez ce qui se passe. Je l'ai fait après avoir rencontré des problèmes d'affichage de Gmail et, à ma grande surprise, plusieurs déclarations de style spécifiques à Microsoft Outlook se sont révélées des erreurs.

Ce qui avait du sens pour moi, alors je les ai supprimés de la feuille de style et les ai mis dans un only for Microsoftbloc de code, comme ceci:

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

Ceci est juste un exemple simple, mais, qui sait, cela pourrait être utile un certain temps.

Shawn Spencer
la source
Merci, la partie sur les CSS invalides m'a fait gagner beaucoup de temps. Si vous êtes toujours là, faites-le moi savoir s'il vous plaît.
Shadow Wizard est une oreille pour vous
1
Salut @ShadowWizard. J'étais parti depuis un moment mais je suis de retour. Heureux que cela vous ait fait gagner du temps.
Shawn Spencer
Merci, je voulais juste m'assurer que la prime ne sera pas gaspillée. :-)
Shadow Wizard est une oreille pour vous
2

Comme d'autres l'ont dit, certains programmes de messagerie ne liront pas les styles css. Si vous avez déjà rédigé un e-mail Web, vous pouvez utiliser l'outil suivant de zurb pour intégrer tous vos styles:

http://zurb.com/ink/inliner.php

Ceci est extrêmement pratique lorsque vous utilisez des modèles comme ceux mentionnés ci-dessus de mailchimp, de moniteur de campagne, etc. car ils, comme vous l'avez constaté, ne fonctionneront pas dans certains programmes de messagerie. Cet outil laisse votre section de style pour les programmes de messagerie qui le liront et met tous les styles en ligne pour obtenir une lisibilité plus universelle dans le format souhaité.

Chad Dupuis
la source
Merci pour le lien inliner.
Shawn Spencer
2

Notez que les services et les outils d'envoi d'e-mails peuvent être en mesure d'intégrer votre CSS pour vous, ce qui permet aux CSS de <style> balises de fonctionner dans Gmail.

Par exemple, si vous envoyez des e-mails avec MailChimp, votre CSS des <style>balises sera automatiquement intégré par défaut. Avec Mandrill, vous pouvez activer cette fonctionnalité (bien qu'elle soit désactivée par défaut pour des raisons de performances ) en cochant la case "Styles CSS intégrés dans les e-mails HTML" dans la section "Envoi par défaut" de l'onglet Paramètres:

Image montrant comment faire cela dans Mandrill

Mark Amery
la source
0

J'ai eu le même problème lors de la conception d'un modèle dans Mailjet. La solution du problème était un code CSS minifié dans des <style>balises.

Vojtěch Remiš
la source