Загрузка...

Ruby & Rails: веб-разработка с удовольствием

Ruby on Rails — фреймворк для создания веб-приложений. Является открытым программным обеспечением (лицензия MIT). Здесь мы обсуждаем новости RoR, делимся учебными материалами и интересными находками С RoR даже сложные веб-приложения могут быть написаны за считанные дни. Это действительно разработка с удовольствием!
     

awesome_email

07.08.10, 15:39
Автор ggg

Часто при верстке HTML-писем возникает множество проблем из-за того, что почтовые клиенты не поддерживают большинство фишек современного web-а, поэтому приходится использовать таблицы вместо div-ов, html-свойства вместо css-аттрибутов (например при задании фоновой картинки таблицы) и, что самое страшное для меня, использовать аттрибут style, вместо class.

Очевидно, что это в итоге шаблон письма становится сложным для восприятия и расширения. Но в Rails есть очень красивый способ борьбы с этой напастью - плагин awesome_email

Предположим, что у нас есть Mailer следующего типа:

 

class Notifier < ActionMailer::Base
  def user(usr)
    content_type 'text/html'
    body :user => usr
  end
end

 

простой html-шаблон письма:

 

< div class="test">hello < %= @user.name %>< /div>

 

А так же CSS-ка mail.css:

 

div.test { font-size: 12px; color: red; }

 

Хочется, чтобы перед отправкой письмо выглядело так:

 

< div class="test" style="font-size: 12px; color: red;" >hello < %= @user.name %>< /div>  

 

Используя awesome_email для достижения поставленной цели достаточно добавить одну строку в Mailer:

 

class Notifier < ActionMailer::Base  
  def user(usr)
    css 'mail' # наша волшебная строка
    content_type 'text/html'
    body :user => usr  
  end  
end  

 

Посмотрим, что скрывается за сценой. С помощью Nokogiri сгенерированный Mailer-ом HTML шаблон разбирается на составляющие, а с помощью плагина css_parser парсится указанная в настройках CSS-ка. После чего плагин проходит по всем css-правилам и присваивает содержимое правил аттрибуту style. Таким образом почтовые клиенты, которые не понимают внешних CSS-ок и аттрибута class начинают приемлимо отображать HTML-письмо.

Чего стоит опасаться при работе с плагином awesome_email?

Хотелось бы верить, что использование плагина позволит избавиться от всех возможных проблем, связанных с версткой писем, но не все так просто. Итак, на что стоит обратить внимание:

 

  • использование данного плагина не отметяет того факта, что почтовики не понимают некоторые css-аттрибуты, например, чтобы задать фон таблицы нужно использовать html-аттрибут background вместо css-аттрибута background-image, подробнее об этом можно почитать тут: http://www.campaignmonitor.com/css/, ну и конечно, прежде чем верстать письмо следет прочитать статьи на тему особенности обработки HTML-кода популярными почтовыми клиентами (мне понравилась эта)
  • оригинальный плагин применяет CSS-правила в том порядке, в котором они идут в CSS-файле, что может привести к неприятным проблемам, поэтому лучше использовать не официальный git репозиторий, а мой. В нем правила применяются в порядке возрастания важности, поэтому чем правило более важно, тем позже в аттрибуте style оно окажется, и тем больший вес имеет (ну и в качестве бонуса можно подключать сразу несколько css-ок, передав на вход массив названий: css ['mail', 'other_styles'], что иногда тоже может оказаться достаточно полезным).
В ближайшем будущем планирую сделать еще несколько улучшений:
  1. сделать так, чтобы CSS-правила применялись только если content-type письма - text/html
  2. сделать так, чтобы css-аттрибуты не дублировались, т.е. чтобы не было ситуации когда в html-аттрибуте style идут подряд два определения: style="color: red; color: green;". Мне кажется, что должно идти только последнее из них.
  3. при рассчете важности учитывается только CSS-селектор, а аттрибут important игнорируется, так что следует иметь ввиду это досадное ограничение при работе с плагином.
Ну и конечно, замечания по коду принимаются и будут исправлены по мере наличия свобоного времени.

Комментарии

Войдите, чтобы оставить комментарий