it-roy-ru.com

Стилизация электронной почты в формате 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?

83
Dónal

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

61
substate

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>
11
fuchs777

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

Для справки вы можете проверить ОФИЦИАЛЬНЫЕ ДОКУМЕНТЫ ПО GMAIL CSS.

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

11
Matthew Johnson

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

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

Image showing how to do this in Mandrill

2
Mark Amery

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

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

1
Shawn Spencer

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

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

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

0
Chad Dupuis