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

Question 1

Я создаю электронное письмо в формате 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?

Question 2

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

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

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

Question 3

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

Question 4

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>

Question 5

Я согласен со всеми, кто поддерживает классы И встроенные стили. Возможно, вы уже это усвоили, но если в вашей таблице стилей будет одна ошибка, 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]-->

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

Question 6

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

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

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

Question 7

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

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

Изображение, показывающее, как это сделать в Mandrill

Question 8

У меня была такая же проблема при разработке шаблона в Mailjet. Решением проблемы стал минимизированный код CSS внутри <style>тегов.