Стилирование электронной почты HTML для Gmail

Я создаю html-адрес электронной почты, который использует внутреннюю таблицу стилей, т.е.

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

При просмотре в Gmail все стили во внутренней таблице стилей игнорируются. Кажется, Gmail игнорирует все стили, отличные от встроенных правил, например.

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

Является ли это единственным вариантом для стилизации HTML-сообщений электронной почты при просмотре с помощью Gmail?

Ответ 1

Используйте встроенные стили для всего. Этот сайт преобразует ваши классы в встроенные стили: http://premailer.dialect.ca/

Ответ 2

Ответы здесь устарели, на сегодняшний день 30 сентября 2016 года. Gmail в настоящее время развертывает поддержку для тега style в head, а также медиа-запросы. Если Gmail является вашей единственной заботой, вы можете использовать классы, такие как современный разработчик!

Для справки вы можете проверить официальные документы gmail CSS.

В качестве побочного примечания Gmail был единственным крупным клиентом, который не поддерживал style (ссылку, пока они не обновятся). Это означает, что вы можете почти безопасно прекратить установку стилей. Некоторые из более неясных клиентов могут все еще нуждаться в них.

Ответ 3

Gmail начал базовую поддержку тегов стиля в области головы. Нашел ничего официального, но вы можете легко попробовать его сами.
Кажется, что игнорируют селектора классов и идентификаторов, но работают основные селекторы элементов.

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

он создаст тег стиля в своей собственной области заголовка, ограниченный div, содержащий тело письма

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

Ответ 4

Я согласен со всеми, кто поддерживает классы и встроенные стили. Возможно, вы уже это узнали, но если в вашей таблице стилей есть одна ошибка, Gmail игнорирует ее.

Вы можете подумать, что ваш CSS совершенен, потому что вы так часто делали, почему у меня были ошибки в моем CSS? Запустите его через CSS Validator (например http://www.css-validator.org/) и посмотрите, что произойдет. Я сделал это после того, как столкнулся с некоторыми проблемами отображения Gmail, и, к моему удивлению, несколько деклараций стиля Microsoft Outlook появились как ошибки.

Что имело смысл для меня, поэтому я удалил их из таблицы стилей и поместил их в блок кода only for Microsoft, например:

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

Это простой пример, но, кто знает, он может пригодиться некоторое время.

Ответ 5

Как говорили другие, некоторые почтовые программы не будут читать стили css. Если вы уже создали электронную почту, вы можете использовать следующий инструмент из zurb для встраивания всех ваших стилей:

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

Это очень удобно при использовании шаблонов, подобных упомянутым выше, от mailchimp, монитора кампании и т.д., поскольку они, как вы нашли, не будут работать в некоторых программах электронной почты. Этот инструмент оставляет ваш раздел стиля для почтовых программ, которые будут его читать, и ставит все стили inline, чтобы получить более универсальную читаемость в желаемом формате.

Ответ 6

Обратите внимание, что службы и инструменты для отправки писем могут встраивать ваш CSS для вас, позволяя CSS в тегах <style> работать в Gmail.

Например, если вы отправляете электронные письма с помощью MailChimp, ваш CSS из тегов <style> будет автоматически вставлен по умолчанию. С помощью Mandrill вы можете включить эту функциональность (хотя по умолчанию она отключена по показателям производительности), установив флажок "Встроенные стили CSS в HTML-сообщениях" в разделе "Отправка по умолчанию" на вкладке "Настройки":

Ответ 7

Теперь Gmail поддерживает тег стиля в голове, но gmail удалит весь тег стиля, если он встретит ошибку.

Вот полезная ссылка из 12 вещей, которые вы должны попробовать при разработке электронных писем в gmail здесь. Статья была опубликована 6 марта 2017 года.

Надеюсь, что это поможет.