web-dev-qa-db-fra.com

Puis-je mettre une balise <style> ... </style> dans le corps d'un fichier HTML à envoyer par e-mail?

Étant donné que de nombreux clients de messagerie ignorent la balise HEAD, puis-je incorporer une feuille de style en ligne dans le corps?

43
Manu

La réponse courte est non. Gmail supprime la balise et son contenu.

Hotmail, Yahoo! Mail et Windows Live Mail ne suppriment pas les balises de style dans l'élément body.

Mais jetez un œil à "The Ultimate Guide to CSS" for HTML email over at Campaign Monitor.

59
cllpse

Il est difficile de créer un e-mail HTML qui fonctionne dans chaque client de messagerie. J'ai passé plusieurs mois à affiner un beau modèle.

http://commadot.com/the-holy-mail/ - blog original avec mes découvertes.

http://commadot.com/email-best-practices/ - dernier plus grand.

Réponse spécifique à votre question: Gmail sera d'accord avec style="" mais pas avec un <style> bloquer.

8
Glen Lipka

Vous voudrez peut-être consulter les modèles d'e-mails html gratuits fournis par CampaignMonitor et MailChimp ( EDIT: et Ink by Zurb):

http://www.campaignmonitor.com/templates/

http://www.mailchimp.com/resources/templates/

http://zurb.com/ink/

Il existe une version mise à jour du guide utile de Campaign Monitor ici: http://www.campaignmonitor.com/css/

Malheureusement, le code HTML le plus fiable à utiliser dans les e-mails est totalement l'âge de pierre

EDIT: Ink a un outil "inliner" qui prend le contenu des balises style et les insère sur les éléments appropriés: http://zurb.com/ink/inliner.php

8
Andy Ford

Oui, vous pouvez. Cependant, vous devez garder à l'esprit que peu de clients de messagerie respectent les normes CSS. Il suffit de s'en tenir aux propriétés css de base comme margin et padding, etc., et tout devrait bien se passer.

Vous pouvez également styliser vos éléments html en ligne (<div style="">) bien que ce ne soit pas une solution élégante.

1
teebot

La plupart des clients gmail prennent désormais en charge les CSS intégrés à partir de septembre 2016, donc cela devrait être sûr.

https://litmus.com/blog/gmail-to-support-responsive-email-design

1
Chris Villa