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

99

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

Dónal
источник
14
Да, это единственный вариант, поскольку многие почтовые веб-клиенты не распознают внутренние таблицы стилей. На самом деле встроенные стили - это рекомендуемый способ создания информационных бюллетеней в формате html.
Майк
Насколько мне известно, читатели электронной почты могут поддерживать html 3.2 и css 1.1.
Как вы создали электронную почту? Я имею в виду, что вы добавляете код создания намерения?
RaphMclee 03
7
В общем, хорошая практика - использовать открывающий <html>тег;)
Zaz
1
Gmail - отстой. Приложение для iOS и веб-приложение тоже!
Адриан Флореску,

Ответы:

19

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

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

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

Мэтью Джонсон
источник
1
Похоже, все равно не работает. Пробовали в Litmus, но не работает. Есть ли особая причина?
Ариан
@ArianHosseinzadeh Что не работает? Добавлена ​​ссылка на их документацию по этому поводу.
Мэтью Джонсон,
Мы пробовали это в Litmus, и он игнорирует нестрочные стили. Вы пробовали использовать <style> для Gmail после того, как они объявили об этом? это сработало?
Ариан
1
@ArianHosseinzadeh Я сделал копирование и вставку из их примера в их документации и прогнал его через putmail . Стили отображаются в Gmail. Я проверил приложение Gmail для Android и Gmail в браузере Chrome. Я предполагаю, что превью Litmus не обновлялись, чтобы отразить это изменение.
Мэтью Джонсон,
1
Мне было интересно, почему мои стили не работают, и я понял, что я поместил их в bodyтег, а не в headтег.
palswim
67

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

подсостояние
источник
2
Этот сайт потрясающий. Показывает предупреждения и выводит простой текст, а также изменяет HTML.
jamesbar2
1
Этот Premailer находится на Ruby, источник: github.com/premailer/premailer . В Python есть еще один: premailer.io, источник: github.com/peterbe/premailer , оба имеют открытый исходный код.
Максим Р.
1
Этот ответ уже не точен. gmail поддерживает стили и классы и имеет официальную документацию по этому вопросу - см. ответ Мэтью Джонсона ниже.
mikemaccana 03
12

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>
fuchs777
источник
Он по-прежнему не поддерживает медиа-запросы, что немного обидно. Классы и идентификаторы тоже полезны :)
Эоин,
2
Теперь они также выполняют медиа-запросы и более полную поддержку стилей CSS. stackoverflow.com/questions/39759764/…
crowmagnumb
7

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

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

Шон Спенсер
источник
Спасибо, часть о недействительном CSS сэкономила мне много времени. Если ты все еще рядом, дай мне знать, пожалуйста.
Shadow Wizard is Ear For You
1
Привет, @ShadowWizard. Я отсутствовал некоторое время, но вернулся. Рад, что это сэкономило вам время.
Шон Спенсер
Ура, просто хотел убедиться, что награда не пропадет зря. :-)
Shadow Wizard is Ear For You
2

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

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

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

Чад Дюпюи
источник
Спасибо за инлайнер-ссылку.
Шон Спенсер
2

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

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

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

Марк Эмери
источник
0

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

Войтех Ремиш
источник