Как стать автором
Обновить

Как быть с HTML-письмами?

Время на прочтение 2 мин
Количество просмотров 5.9K
Недавно столкнулся с задачей по верстке HTML-писем. Как известно, многие почтовые клиенты, в том числе и Gmail игнорируют css-классы и содержимое тега style, не говоря уже о подключении внешних CSS-файлов. Поэтому обычной практикой при верстке HTML-писем является использование inline-стилей. Если делать это самостоятельно, то шаблон письма очень быстро превращается в кашу, поддерживать и расширять которую очень сложно. В связи с чем rails-разработчики используют различные плагины, которые позволяют «встроить» css-класс в аттрибут style.

Пишем обычный html в теле письма:

<div class="test">hello world</div>


и говорим плагину, сделай inline-стили, используя следующую css-ку:

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


после чего на выходе получаем такой код:

<div class="test" style="font-size: 12px; color: red;">hello world</div>


Таким образом, с одной стороны мы имеем читаемые, расширяемые и легко поддерживаемые шаблоны html-писем, а с другой — наши шаблоны нормально перевариваются различными почтовыми клиентами.
После того как я узнал о прекрасном плагине awesome_email мне казалось что никаких проблем возникнуть не может, ведь принцип использования прост как валенок: указывает из каких css-ок брать стили и говорим — «заинлайнь их». Но не тут то было, письма стали приходить не в том виде, в котором должны были. Чтобы понять природу ошибки рассмотрим принцип работы awesome_email (который, как оказалось, совсем не awesome). Сначала с помощью плагина css_parser разибирается на составляющие указанная css-ка, потом с помощью nokogiri распарсивается html-документ, ну и наконец, в цикле по селектору каждого css-правила получаются html-элементы и для каждого из них в конец style дописывается содержимое правила. Вот к чему это может привести:

CSS:
div.test:first-child {color: red;}
div.test {color: green;}


HTML:
<div class="test">hello world</div>


OUTPUT:
<div class="test" style="color: red; color: green;">hello world</div>


Мало того, что css-свойство color дублируется, так оно еще и применяется неправильно, потому что в цикле по CSS-правилами не учитывается их значимость, а просто сначала добавляется содержимое первого css-правила, а потом второго, в связи с чем цвет текста зеленый, хотя должен быть красным. Данной проблемы можно было бы избежать следующим способом: проходить в цикле не по css-правилам, а по html-элементам, и для каждого, каким-то образом получать все связанные с ним css-правила (как при просмотре кода через firebug), но это только гипотеза и как лучше реализовать такое поведение я не знаю. Поэтому главный вопрос таков: как лучше всего встраивать стили html-письма в rails приложении? Какие плагины использовать, чтобы с одной стороны, шаблон письма оставался понятным и расширяемым, а с другой — почтовые клиенты были довольны и отображали содержимое как задумано?

UPD. Задача решена. Вот код: github.com/goganchic/awesome_email а вот сопутствующая статья: rails.vsevteme.ru/items/show?id=15682
Теги:
Хабы:
+17
Комментарии 38
Комментарии Комментарии 38

Публикации

Истории

Работа

Ruby on Rails
17 вакансий

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн