Поддержка CSS в почтовых системах Рунета
Изучена степень поддержки CSS в популярных почтовых системах Рунета. Для дизайнеров, которые разрабатывают дизайн-макеты для писем, в частности, дизайн для новостных рассылок. Июнь 2007.
Введение
Разработка дизайн-макета письма во многом похожа на работку дизайна обычной html-страницы. Однако, все почтовые программы в той или иной степени ограничивают использование css в письмах с целью защиты от вредоносных действий – фишинга, кросс-скриптинга и т.д.
Чтобы создать дизайн-макет, который будет хорошо смотреться в почтовых ящиках пользователей, надо знать особенности отображения html и css в почтовых программах. Мы исследовали особенности популярных в Рунете почтовых систем и свели данные в таблицы.
Выбор почтовых систем
Для оценки популярности почтовых систем, мы использовали статистику Почтового Куба.
В июне 2007 года подписчики списков, обслуживаемых Почтовым Кубом распределились в таких пропорциях:
| mail.ru |
27,13%
|
| yandex.ru |
8,53%
|
| rambler.ru |
5,92%
|
| gmail.com |
1,12%
|
| yahoo.com |
0,86%
|
| ukr.net |
0,64%
|
| pochta.ru |
0,81%
|
| hotmail.com |
0,54%
|
| newmail.ru |
0,41%
|
| tut.by |
0,21%
|
Эти данные нельзя рассматривать как глобальный рейтинг почтовых систем, однако, их достаточно для определения лидеров популярности.
Сразу определимся, что в нашем исследовании не будут принимать участие англоязычные системы gmail.com, yahoo.com, hotmail.com, по той причине, что они уже исследованы достаточно авторитетными источниками [например, здесь и
здесь].
По той же причине мы не исследуем известные почтовые клиенты – Microsoft Outlook , Mozilla Thunderbird и Lotus Notes, а отсылаем к другим исследованиям (мы планируем свести результаты разных источников в одну таблицу и опубликовать их в этом блоге).
Из "настольных" почтовых клиентов мы решили исследовать только The Bat! (версия 3.99), потому что он достаточно популярен в русскоязычном мире.
Почтовая система ukr.net, несмотря на относительную популярность, не вошла в исследование, поскольку регистрация в ней ограничена (из России зарегистрироваться нельзя – такое вот цифровое неравенство).
Методика
Мы подготовили специальное письмо, которое отправляли на тестовые ящики в каждой из почтовых систем.
Поддержку стилей определяли визуально, а также по исходному коду страницы с письмом (если исходный текст был доступен).
Мы исследовали почтовые системы по следующим направлениям:
- Включение таблиц стилей (
link,style) - Поддержка inline-стилей
- Автоматическая загрузка изображений
- Поддержка кодировки utf-8
Результаты
Включение таблиц стилей
Для включение таблиц стилей в обычную html-страницу используется тэг link или блоки style. Наша первая цель – выяснить как почтовые клиенты относятся к такому определению стилей:
| Yandex | Rambler | Pochta | newmail | tut.by | The Bat! | ||
<link> |
 |
|
|
|
 |
|
|
<style> внутри <head> |
|
|
|
|
|
|
|
<style> внутри <body> |
|
|
|
|
|
|
|
Как выснилось, ни одна из почтовых систем, кроме newmail, не поддерживает включение таблиц стилей. А значит, почти у всех читателей вашего письма письма не будут работать стили, которые вы определяете в блоке <style> или во внешнем файле, подключаемым при помощи <link>.
Вывод – в письме нельзя использовать команды <link> или <style> для подключения стилей. Чуть лучше обстоят дела с inline-определениями.
Inline-CSS
Стили можно определять inline для каждого тэга, например, <p style="line-height: 1.3em">. Такое определение поддерживается некоторыми системами электронной почты, но нужно быть готовым к тому, что большинство получателей всё же не увидят это оформление:
| Yandex | Rambler | Pochta | newmail | tut.by | The Bat! | ||
| background-color | |
|
|
|
|
|
|
| background-image | |
|
|
|
|
|
|
| background-position | |
|
|
|
|
|
|
| background-repeat | |
|
|
|
|
|
|
| border | |
|
|
|
|
|
|
| border-collapse | |
|
|
|
|
|
|
| border-spacing | |
|
|
|
|
|
|
| bottom | |
|
|
|
|
|
|
| caption-side | |
|
|
|
|
|
— |
| clear | |
|
|
|
|
|
|
| clip | |
|
|
|
|
|
|
| color | |
|
|
|
|
|
|
| cursor | |
|
|
|
|
|
|
| direction | |
|
|
|
|
|
|
| display | |
|
|
|
|
|
|
| empty-cells | |
|
|
|
|
|
|
| float | |
|
|
|
|
|
 |
| font-family | |
|
|
|
|
|
|
| font-size | |
|
|
|
|
|
|
| font-style | |
|
|
|
|
|
|
| font-variant | |
|
|
|
|
|
|
| font-weight | |
|
|
|
|
|
|
| height | |
|
|
|
|
|
|
| left | |
|
|
|
|
|
|
| letter-spacing | |
|
|
|
|
|
|
| line-height | |
|
|
|
|
|
|
| list-style-image | |
|
|
|
|
|
|
| list-style-position | |
|
|
|
|
|
|
| list-style-type | |
|
|
|
|
|
|
| margin | |
|
|
|
|
|
|
| opacity | |
|
|
|
|
|
|
| overflow | |
|
|
|
|
|
|
| padding | |
|
|
|
|
|
|
| position | |
|
|
|
|
|
|
| right | |
|
|
|
|
|
|
| table-layout | |
|
|
|
|
|
|
| text-align | |
|
|
|
|
|
|
| text-decoration | |
|
|
|
|
|
|
| text-indent | |
|
|
|
|
|
|
| text-transform | |
|
|
|
|
|
|
| top | |
|
|
|
|
|
|
| vertical-align | |
|
|
|
|
|
|
| visibility | |
|
|
|
|
|
|
| white-spacing | |
|
|
|
|
|
|
| width | |
|
|
|
|
|
|
| word-spacing | |
|
|
|
|
|
|
| z-index | |
|
|
|
|
|
|
Яндекс.Почта поддерживает inline-определения стилей. Хорошо работает как «старый» вариант mail.yandex.ru, так и новый mail.ya.ru.
Есть ограничения, связанные с абсолютным позиционированием.
Mail.ru, Rambler.ru, pochta.ru и tut.by не поддерживает стили вообще. Они просто удаляют все определения стилей.
The Bat! отображает некоторые стили. В нем работают «простые» определения, касающиеся оформления шфрита, а также отступы (margin и padding) и цвет фона (background-color). Остальные стили the Bat отключает.
Автоматическая загрузка изображений
Некоторые почтовые клиенты не загружают автоматически картинки, вставленные в письмо, а предлагают нажать специальную кнопку для их загрузки.
Так ведут себя Gmail и Microsoft Outlook.
А вот как работают с изображениями исследуемые нами системы:
| Yandex | Rambler | Pochta | newmail | tut.by | The Bat! | ||
img |
|
|
|
|
|
|
|
| background-image | |
|
|
|
|
|
|
table background |
|
|
|
|
|
|
|
Почти все системы веб-почты загружают картинки автоматически на радость дизайнеру. Возможно, ситуация изменится в будущем, но сейчас дело обстоит именно так.
Несколько портит картину и The Bat!, который вообще не загружает изображения. Он не загружает их автоматически и не предлагает загрузить их в дальнейшем.
Поддержка utf-8
Кодировку utf-8 поддерживает подавляющее большинство систем:
| Yandex | Rambler | Pochta | newmail | tut.by | The Bat! | ||
| Поддержка utf-8 | |
|
|
|
|
|
|
Мы протестировали также GMail.com, Yahoo.com, Hotmail.com, Microsoft Outlook XP/2003/2007 и Outlook Express последних версий и не обнаружили проблем, так что если Вы еще не используете utf-8, присмотритесь к ней.
Единственная система, которая не поддерживает utf-8 на сегодняшний день – это newmail.ru. Причины этого непонятны, мы постараемся получить объяснение от владельцев системы, тем более, что система pochta.ru того же владельца utf-8 поддерживает.
Литература
[1] CSS and Email, Kissing in a Tree http://alistapart.com/articles/cssemail
[2] Style In Email: http://css-discuss.incutio.com/?page=StyleInEmail
[3] CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail: http://www.xavierfrenette.com/articles/css-support-in-webmail/
[4] A Guide to CSS Support in Email: http://www.campaignmonitor.com/blog/archives/2007/04/…
Popularity: 24% [?]
No related posts.
Очень полезный текст. Спасибо автору.
Спасибо. Действительно полезный обзор. Но есть ли альтернатива для создателей рассылок? Можно ли как-нибудь все-таки задавать стили?
Елена,
задать стили для всех почтовых систем никак нельзя. mail-ru вырежет из письма любые стили.
Но можно смягчить последствия.
Во-первых, в каждом письме можно давать ссылку на его онлайн-версию.
Во-вторых, чаще использовать старые добрые тэги и атрибуты – font, bgcolor.
В-третьих, надо протестировать письмо во всех почтовых системах и сделать так, чтобы даже без css письмо читалось.
И так далее ;)
Сергей, спасибо большое!
Я столкнулась с тем, что возникает проблема с отступами внутри таблиц. Mail.ru игнорирует cellspacing=0 и cellpadding=0, он задает какие-то свои значения :( А через уже разобрались, что стиль нельзя никак задать… Из-за всего этого рассылка становится очень вытянутой, и теряется внешний вид.
Рассылка, которой я занимаюсь, не спам, а вполне полезная. Пользователи сами на нее подписываются. Возможно договариваться с почтовыми службами, чтобы они не блокировали стили в проверенных рассылках?
Договориться с почтовыми службами… нет, это невозможно. Я считаю, что не поддерживают стили только ленивые разработчики. И вряд ли вы сможете повлиять на них ;)
С другой стороны, дизайнеру не составит большого труда поправить дизайн рассылки так, чтобы она _нормально_ показывалась в mail.ru.
Дайте ссылку ссылку на свою рассылку здесь, в комментариях.
Я посоветую вам что-нибудь.
Больше не буду пользоваться почтой mail.ru :)
Я думаю переделать рассылку с использованием пустого изображения под цвет фона как разделитель между элементами. Если не получится, то буду снова звать на помощь :) Спасибо!
[...] Яндекс.Почта поддерживает css очень даже неплохо, а Mail.ru не поддерживает вообще. Gmail и Hotmail поддерживает многие атрибуты, Outlook 2003 дружит с дизайном, а вот Outlook 2007 использует для отображения движок ms word и рендерит html совсем не так, как браузер. А ведь есть еще около 20 известных почтовых клиентов и веб-систем, каждая из которых трактует html и css в письмах по-своему (про мировые системы здесь, про русские — у нас). [...]
[...] поддержки CSS в mail.ru, почте Яндека и ? амблера (результаты). Тогда мы разработали свой вариант тестового [...]
Тест конечно интересный. но почему не сделали отдельно тест для почтовых программ. А только включили Bat. Многие получают почту именно почтовиками, и не только баттом.
PaLyCH, потому что другие системы исследовали раньше нас: http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html
Исследовать-то исследовали, а на русском нам кто объяснит ? :)
ksi, вот новая ссылка
там просто таблица – какие почтовые клиенты какие css-свойства поддерживают, всё понятно без перевода:
http://www.campaignmonitor.com/css/