Здравствуйте, хабраюзеры!
Недавно довелось копаться с рассылкой писем в HTML-формате. Есть много статей, написанных на тему валидной вёрстки рассылок, однако здесь речь пойдёт не об этом. Известно, что у каждого почтовика есть свои особенности отображения HTML-письма. Меня заинтересовали эти особенности и различия в отображении письма на разных почтовиках.
Под исследование попали три моих почтовых ящика в службах mail.ru, yandex.ru и gmail.com. Был написан скрипт, который отправлял на них одно и то же письмо в html формате. С помощью него я прогнал несколько вариантов и сравнил результаты. Вот что получилось:
Тело письма, отображаемого почтовиками, начинается с тега body. Оно и понятно — всё письмо содержится именно в нём. Однако сам тег body может содержать атрибут style. В каждом почтовике тело письма представляется div'ом, однако не все переносят в этот div содержимое style.
Атрибут style зачастую анализируется почтовой машиной и может быть изменён перед отправкой пользователю. Как это происходит на исследуемых почтовиках:
Во всех статьях по вёрстке HTML-рассылок неоднократно упоминается, что про отрицательные значения (например в margin) можно забыть. Результат тестов вполне ожидаемый:
Атрибут margin в Mail.ru пропускается только благодаря тому, что стили там не проходят предварительной обработки.
CSS 3 на данный момент находится в разработке, и некоторые почтовики считают определённые атрибуты недопустимыми. Итак, протестируем на наших трёх клиентах некоторые правила CSS3:
Полная поддержка CSS3 и любых других браузерно-зависимых атрибутов ввиду очень лояльной фильтрации тега style.
Атрибут height поддерживается не всеми почтовиками.
UPD: В комментариях выяснилось, что уловки типа javascript:*** и expression:*** блокируются системой безопасности mail.ru.
Недавно довелось копаться с рассылкой писем в HTML-формате. Есть много статей, написанных на тему валидной вёрстки рассылок, однако здесь речь пойдёт не об этом. Известно, что у каждого почтовика есть свои особенности отображения HTML-письма. Меня заинтересовали эти особенности и различия в отображении письма на разных почтовиках.
Под исследование попали три моих почтовых ящика в службах mail.ru, yandex.ru и gmail.com. Был написан скрипт, который отправлял на них одно и то же письмо в html формате. С помощью него я прогнал несколько вариантов и сравнил результаты. Вот что получилось:
Тег body
Тело письма, отображаемого почтовиками, начинается с тега body. Оно и понятно — всё письмо содержится именно в нём. Однако сам тег body может содержать атрибут style. В каждом почтовике тело письма представляется div'ом, однако не все переносят в этот div содержимое style.
- Mail.ru — Тег body заменяется на <div id='style_id_BODY'>, где id — идентификатор пользователя, передаваемый в строке GET запроса. Атрибут style теряется. Кроме того, теряются любые другие атрибуты, задаваемые для тега body.
- Yandex.ru — Тег body меняется на <div class='b-message-body__content'>. Стили не переносятся, как и любые другие атрибуты тега 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.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.
UPD: В комментариях выяснилось, что уловки типа javascript:*** и expression:*** блокируются системой безопасности mail.ru.