Могу ли я поместить тег <style>...</ style> в тело файла HTML для отправки по электронной почте?
Так как многие почтовые клиенты игнорируют тег HEAD, могу ли я встроить встроенную таблицу стилей в тело?
7 ответов
Краткий ответ: нет. Gmail удаляет тег и его содержимое.
Hotmail, Yahoo! Mail и Windows Live Mail не удаляют теги style в элементе body.
Но посмотрите "Окончательное руководство по CSS" для электронной почты в формате HTML в Campaign Monitor.
Создать электронную почту в формате HTML, которая работает в каждом почтовом клиенте, сложно. Я провел несколько месяцев, дорабатывая красивый шаблон.
http://commadot.com/the-holy-mail/ - оригинальный блог с моими выводами.
http://commadot.com/email-best-practices/ - последнее величайшее.
Конкретный ответ на ваш вопрос: Gmail будет в порядке с style=""
но не с <style>
блок.
Возможно, вы захотите проверить бесплатные HTML-шаблоны электронной почты, которые предоставляют CampaignMonitor и MailChimp (EDIT: и Ink by Zurb):
http://www.campaignmonitor.com/templates/
http://www.mailchimp.com/resources/templates/
Вот обновленная версия полезного руководства Campaign Monitor здесь: http://www.campaignmonitor.com/css/
К сожалению, самый надежный HTML для использования в электронных письмах полностью каменный век
РЕДАКТИРОВАТЬ: Ink имеет инструмент "inliner", который принимает содержимое style
помечает и вставляет их в соответствующие элементы: http://zurb.com/ink/inliner.php
Большинство клиентов Gmail теперь поддерживают встроенный CSS с сентября 2016 года, поэтому это должно быть безопасно.
https://litmus.com/blog/gmail-to-support-responsive-email-design
Верхний ответ устарел. Gmail теперь поддерживает использование медиа-запросов вместе с другими свойствами css - https://developers.google.com/gmail/design/css .
Да, ты можешь. Однако вы должны иметь в виду, что немногие почтовые клиенты уважают стандарты CSS. Просто придерживайтесь основных свойств CSS, таких как margin
а также padding
и т. д., и все должно быть в порядке.
Также вы можете стилизовать свои HTML-элементы в строке (<div style="">
) хотя это не элегантное решение.
Как указывали другие, принятый ответ устарел.
В моих собственных тестах по состоянию на 20 августа 2022 г. Gmail поддерживает элементы с классами, и использование<style>
тег, пока он находится в<head>
. Кроме того, Gmail больше не удаляет встроенные классы для элементов.
Пример электронной почты:
<head>
<style>
div.mydiv { background-color: blue; }
</style>
</head>
<body>
<div class='mydiv'>This is the contents of my email message! Thank you
google, for observing the style tag!</div>
</body>