Стилизация электронной почты в формате HTML для Gmail - PullRequest
Новая
       18

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

89 голосов
/ 29 января 2012

Я генерирую 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?

Ответы [ 6 ]

62 голосов
/ 04 февраля 2012

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

12 голосов
/ 30 сентября 2016

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

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

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

11 голосов
/ 22 мая 2014

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

<!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>
3 голосов
/ 21 декабря 2017

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

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

2 голосов
/ 30 мая 2015

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

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

Image showing how to do this in Mandrill

2 голосов
/ 23 марта 2015

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

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

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

...