Я создаю электронное письмо в формате 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?
html
css
gmail
html-email
Dónal
источник
источник
<html>тег;)Ответы:
Ответы здесь устарели, по состоянию на сегодняшний день 30 сентября 2016 года Gmail в настоящее время выкатывает поддержку для
styleтега вhead, а также медиа - запросов. Если вас беспокоит только Gmail, вы можете безопасно использовать классы, как современный разработчик!Для справки вы можете проверить официальную документацию CSS Gmail .
Кстати, Gmail был единственным крупным клиентом, который не поддерживал
style( ссылка , пока они все равно не обновятся). Это означает, что вы можете почти безопасно отказаться от встроенных стилей. Некоторым из наиболее малоизвестных клиентов они все еще могут понадобиться.источник
bodyтег, а не вheadтег.Используйте встроенные стили для всего. Этот сайт преобразует ваши классы во встроенные стили: http://premailer.dialect.ca/
источник
Gmail начал базовую поддержку тегов стиля в области заголовка. Пока ничего официального не нашел, но вы можете легко попробовать сами.
Кажется, что игнорируются селекторы классов и идентификаторов, но селекторы базовых элементов работают.
он создаст тег стиля в своей собственной области заголовка, ограниченный div, содержащий тело письма
источник
Я согласен со всеми, кто поддерживает классы И встроенные стили. Возможно, вы уже это усвоили, но если в вашей таблице стилей будет одна ошибка, Gmail проигнорирует ее.
Вы можете подумать, что ваш CSS идеален, потому что вы делали это так часто, почему у меня могут быть ошибки в моем CSS? Запустите его через CSS Validator (например, http://www.css-validator.org/ ) и посмотрите, что произойдет. Я сделал это после того, как столкнулся с некоторыми проблемами отображения Gmail, и, к моему удивлению, несколько объявлений стиля Microsoft Outlook оказались ошибочными.
Это имело для меня смысл, поэтому я удалил их из таблицы стилей и поместил в
only for Microsoftблок кода, например:Это всего лишь простой пример, но кто знает, когда-нибудь он может пригодиться.
источник
Как уже говорили другие, некоторые почтовые программы не будут читать стили css. Если у вас уже есть электронная почта, вы можете использовать следующий инструмент из zurb для встраивания всех ваших стилей:
http://zurb.com/ink/inliner.php
Это очень удобно при использовании шаблонов, подобных упомянутым выше, из mailchimp, монитора кампании и т. Д., Поскольку они, как вы обнаружили, не будут работать в некоторых почтовых программах. Этот инструмент оставляет ваш раздел стилей для почтовых программ, которые его прочитают, и помещает все стили в строку, чтобы обеспечить более универсальную читаемость в нужном вам формате.
источник
Обратите внимание, что службы и инструменты для отправки электронных писем могут иметь возможность встроить ваш CSS за вас, позволяя CSS в
<style>тегах работать в Gmail.Например, если вы отправляете электронные письма с помощью MailChimp, ваш CSS из
<style>тегов по умолчанию будет встроен автоматически. В Mandrill вы можете включить эту функцию (хотя по умолчанию она отключена из соображений производительности ), установив флажок «Встроенные стили CSS в сообщениях электронной почты HTML» в разделе «Отправка значений по умолчанию» на вкладке «Настройки»:источник
У меня была такая же проблема при разработке шаблона в Mailjet. Решением проблемы стал минимизированный код CSS внутри
<style>тегов.источник