Pull to refresh

Особенности обработки HTML-писем

Reading time3 min
Views42K
Здравствуйте, хабраюзеры!

Недавно довелось копаться с рассылкой писем в HTML-формате. Есть много статей, написанных на тему валидной вёрстки рассылок, однако здесь речь пойдёт не об этом. Известно, что у каждого почтовика есть свои особенности отображения HTML-письма. Меня заинтересовали эти особенности и различия в отображении письма на разных почтовиках.

Под исследование попали три моих почтовых ящика в службах mail.ru, yandex.ru и gmail.com. Был написан скрипт, который отправлял на них одно и то же письмо в html формате. С помощью него я прогнал несколько вариантов и сравнил результаты. Вот что получилось:

Тег body


Тело письма, отображаемого почтовиками, начинается с тега body. Оно и понятно — всё письмо содержится именно в нём. Однако сам тег body может содержать атрибут style. В каждом почтовике тело письма представляется div'ом, однако не все переносят в этот div содержимое style.
  • Mail.ru — Тег body заменяется на &ltdiv id='style_id_BODY'&gt, где id — идентификатор пользователя, передаваемый в строке GET запроса. Атрибут style теряется. Кроме того, теряются любые другие атрибуты, задаваемые для тега body.
  • Yandex.ru — Тег body меняется на &ltdiv class='b-message-body__content'&gt. Стили не переносятся, как и любые другие атрибуты тега body.
  • Gmail.com — Тег body меняется на обычный div, стили переносятся. Кроме того, в этот div попадают атрибуты, установленные для body (имеются ввиду атрибуты типа background).


Особенности переноса атрибута style


Атрибут style зачастую анализируется почтовой машиной и может быть изменён перед отправкой пользователю. Как это происходит на исследуемых почтовиках:
  • Mail.ru — Обработка атрибута style производится по принципу «всё разрешено, что явно не запрещено». Пока удалось обнаружить, что под запрет попадает position: absolute.
  • Yandex.ru — Атрибуты style проходят предварительную обработку. Незнакомые стили (ну и соответственно, ошибки) не пропускаются. Обрезание стилей происходит таким образом, что в письмо, отображаемое клиенту попадают все стили до первого неизвестного. Таким образом, конструкция width:100px;some-new-style:new;background-color:#CCC; будет заменена на width:100px;
  • Gmail.com — Атрибуты style также проходят предварительную обработку, однако в этом случае требования более жёсткие, чем у Yandex.ru. Если в значении атрибута будет найден хотя бы один недопустимый стиль, весь атрибут игнорируется.


Отрицательные значения


Во всех статьях по вёрстке HTML-рассылок неоднократно упоминается, что про отрицательные значения (например в margin) можно забыть. Результат тестов вполне ожидаемый:
  • Mail.rumargin-left:-100px; — работает.
  • Yandex.rumargin-left:-100px; — не работает.
  • Gmail.commargin-left:-100px; -не работает.

Атрибут margin в Mail.ru пропускается только благодаря тому, что стили там не проходят предварительной обработки.

Поддержка CSS3


CSS 3 на данный момент находится в разработке, и некоторые почтовики считают определённые атрибуты недопустимыми. Итак, протестируем на наших трёх клиентах некоторые правила CSS3:

Mail.ru


Полная поддержка CSS3 и любых других браузерно-зависимых атрибутов ввиду очень лояльной фильтрации тега style.

Yandex.ru


  • linear-gradient — да
  • box-shadow — нет
  • border-radius — да
  • text-shadow — нет
  • word-wrap — нет
  • resize — нет
  • несколько background'ов — да
  • border-image -да

Gmail.com


  • linear-gradient — нет
  • box-shadow — нет
  • border-radius — да
  • text-shadow — да
  • word-wrap — да
  • resize — нет
  • несколько background'ов — да
  • border-image -нет


CSS height


Атрибут height поддерживается не всеми почтовиками.
  • Mail.ru — поддерживается.
  • Yandex.ru — поддерживается.
  • Gmail.com — не поддерживается, заменяется на min-height.


UPD: В комментариях выяснилось, что уловки типа javascript:*** и expression:*** блокируются системой безопасности mail.ru.
Tags:
Hubs:
Total votes 52: ↑47 and ↓5+42
Comments19

Articles