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

Здравствуйте, читатели!

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

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

Во всех статьях по вёрстке HTML-рассылок неоднократно упоминается, что про отрицательные значения (например в margin) можно забыть. Результат тестов вполне ожидаемый:

• Mail.ru — margin-left:-100px; — работает.
• Yandex.ru — margin-left:-100px; — не работает.
• Gmail.com — margin-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.

Автор: artyom_256