web-dev-qa-db-fra.com

Styling email HTML pour Gmail

Je génère un email 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>

Lors de l'affichage 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 intégrées, par exemple.

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

Est-ce ma seule option pour créer un style pour les e-mails HTML vus avec Gmail?

htmlcssgmailhtml-email
83
Dónal

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

61
substate

Gmail a commencé à prendre en charge les balises de style dans la zone principale. Vous n'avez encore rien trouvé officiel, mais vous pouvez facilement l'essayer vous-même.
Il semble ignorer les sélecteurs de classe et d’id, 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 étiquette de style dans sa propre zone principale limitée à la div contenant le corps du mail

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>
11
fuchs777

Les réponses ici sont obsolètes, au 30 septembre 2016. Gmail utilise actuellement le déploiement du support pour la balise style dans la head, ainsi que pour les requêtes multimédia. Si Gmail est votre seule préoccupation, vous pouvez utiliser des classes comme un développeur moderne!

Pour référence, vous pouvez consulter les DOCUMENTS OFFICIELS CSS DE GMAIL.

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

11
Matthew Johnson

Notez que les services et les outils d’envoi d’e-mails peuvent intégrer votre code CSS, permettant ainsi à CSS dans les balises <style> de fonctionner dans Gmail.

Par exemple, si vous envoyez des courriels avec MailChimp, vos balises CSS à partir de <style> seront automatiquement alignées 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 "Paramètres d'envoi par défaut" de l'onglet Paramètres:

Image showing how to do this in Mandrill

2
Mark Amery

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

Vous pourriez penser que votre CSS est parfait, parce que vous l'avez fait 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 Gmail et, à ma grande surprise, plusieurs déclarations de style spécifiques à Microsoft Outlook se sont révélées être des erreurs.

Ce qui me paraissait logique, alors je les ai supprimés de la feuille de style et les ai placés dans un bloc de code only for Microsoft, comme suit:

<!--[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]-->

Ce n’est qu’un exemple simple, mais qui sait, cela pourrait être utile un certain temps.

1
Shawn Spencer

Comme d'autres l'ont déjà 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

Cela s'avère extrêmement pratique lorsque vous utilisez des modèles tels que ceux mentionnés ci-dessus, tels que mailchimp, le moniteur de campagne, etc. Cet outil laisse votre section de style pour les programmes de messagerie qui le liront et place tous les styles en ligne pour obtenir une lisibilité plus universelle dans le format souhaité.

0
Chad Dupuis