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

Я генерация HTML электронной почты, которая использует внутреннюю таблицу стилей, то естьСтайлинг HTML электронной почты для Gmail

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

источник

2012-01-29 Dónal

+14

Да, это единственный, поскольку многие веб-клиенты электронной почты не распознают внутренние таблицы стилей. На самом деле встроенный стиль - это рекомендуемый способ разработки html-бюллетеней. – Mike

Насколько я знаю, читатели электронной почты могут рассчитывать на поддержку html 3.2 и css 1.1. – bdares

Как вы создали свою электронную почту? Я имею в виду, добавить ли вы код создания намерения? – RaphMclee

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

источник

2012-02-03 21:43:39 substate

Этот сайт потрясающий. Показывает предупреждения и дает вам простой текстовый вывод, а также переписывает ваш HTML. – jamesbar2

Awesome, Это очень полезно. Спасибо –

Этот Premailer находится в Ruby, источник: https://github.com/premailer/premailer. В Python есть еще один: https://premailer.io/ source: https://github.com/peterbe/premailer, оба с открытым исходным кодом. –

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>

источник

2014-05-22 12:43:46 fuchs777

Он по-прежнему не поддерживает запросы СМИ, хотя это немного стыдно. Классы и идентификаторы тоже полезны :) – Eoin

Теперь они выполняют медиа-запросы и предоставляют более полную поддержку стилизации CSS. http://stackoverflow.com/questions/39759764/unexpected-value-fileuploadmodule-imported-by-the-module-uploadermodule-ng – crowmagnumb

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

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

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

источник

2015-03-22 22:59:55

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

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

Image showing how to do this in Mandrill

источник

2015-05-30 11:27:27

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

Для справки вы можете проверить official gmail CSS docs.

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

источник

2016-09-30 19:05:09

Похоже, что это все еще не работает. Мы попробовали это в Litmus, но это не сработало. Есть ли какая-то особая причина? –

@ArianHosseinzadeh Что не работает? Добавлена ссылка на их документацию по этому вопросу. –

Мы попробовали его в Litmus, и он игнорирует нестрочные стили. Вы пробовали