Классы CSS в электронной почте

Насколько я знаю, CSS-селекторов/классов нельзя использовать для стилирования отправляемых вами электронных писем, поскольку многие почтовые клиенты не будут извлекать внешний файл css.

Мне было интересно, как люди обычно создают шаблоны для автоматических писем. Вы просто вставляете все стили CSS в DOM? Это кажется крайне неэффективным и подверженным ошибкам методом.

Мне было интересно, есть ли инструмент, который "выравнивает" HTML-документ, созданный с помощью селекторов CSS, в HTML-документ с встроенным стилем CSS. Если такой инструмент существует, то я могу использовать обычную структуру шаблонов, которые у меня есть (я использую django на данный момент) для создания электронной почты, обработки стилей и отправки результата.

Ответы

Ответ 1

Здесь есть хорошая статья: Использование CSS в HTML-письмах: настоящая история

Короче:

ЧТО ВЫ НЕ МОЖЕТЕ:

  • Включить раздел <head> со стилями. Apple Mail.app поддерживает его, но Gmail и Hotmail этого не делают, поэтому это не-нет. Hotmail будет поддерживать раздел стиля в теле, но Gmail до сих пор этого не делает.
  • Ссылка на внешнюю таблицу стилей. Не многие клиенты электронной почты поддерживают это, лучше всего просто забыть об этом.
  • Фоновое изображение/Фоновая позиция. Gmail также является виновником этого.
  • Очистите ваши поплавки. Gmail снова.
  • Маржа. Да, серьезно, Hotmail игнорирует поля. В принципе, любое позиционирование CSS вообще не работает.
  • Шрифт-что-нибудь. Скорее всего, Eudora проигнорирует все, что вы пытаетесь объявить с помощью шрифтов.

Что вы можете сделать.

В двух словах встроенные стили. Это не так страшно, как вы думаете, поскольку мы в основном разрабатываем одноразовое электронное письмо, встроенные стили не столь же вопиющие, как использование их на веб-сайте. Нужен большой зеленый заголовок для блока текста?

<h3 style="color: #1c70db;">NOW $159</h3>

  • Большой can-do - это изображения. Думайте творчески о том, что вы можете делать с изображениями.
  • Так как вы будете использовать таблицы, подумайте о ней. Сетки - друзья дизайнеров, есть много возможностей, которые вы можете сделать с сеткой.

Ответ 2

При разработке электронной почты HTML вы должны проектировать, как если бы вы делали это для IE5/6:

  • Макет (почти во всех случаях) с использованием таблиц
  • CSS внутри <head> (и встроенный также приемлемый)

Это означает отсутствие внешних файлов CSS.

Если вы хотите знать, какие CSS-селектора поддерживают различные почтовые клиенты (в том числе веб-ссылки), CampaignMonitor - это место, где вы можете посмотреть.

Извините, но не могу помочь вам с инструментами, но ссылка Shoban от комментария к вашему вопросу должна помочь с этим.

Ответ 3

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

Ответ 4

Чувак полностью зависит от того, какие клиенты вы поддерживаете. если вы поддерживаете Outlook 2007 и/или 2010, вы ввернуты... не то, что это невозможно сделать, но вы получите удовольствие и боль. если это так, вам нужно сделать все в порядке. это отстой. Я сделал несколько шаблонов для своей работы (ов).... он выходит из-под контроля, если вы забыли/пропустите что-то. о да, и вы практически захотите reset/restyle каждый элемент. вновь и вновь. в очереди. хорошие времена. встроенная функция сброса разметки http://inlinestyler.torchboxapps.com/