Верстка писем. Снова баги

Автор изображения Eva Galesloot

Привет!

Прежде всего хочу принести извинения в адрес mail.ru и лично Андрею Сумину AndrewSumin за пост, написанный сгоряча. Проблема верстки писем изрядно наболела, но местами все не так плохо как казалось. Присутствуют и проблемы.

Касательно mail.ru на данный момент претензий почти не имею. Верстать письма под эту вебморду так же приятно, как и для гуглопочты. Очень приятно видеть, что русские вебморды стали поддерживать фоновые изображения.

Знаете чего очень не хватает? Фичлиста от разработчиков почтовых клиентов и вебморд. Было бы очень здорово узнавать из первых рук, какие фичи ввели в обращение, а какие наоборот — урезали. Это облегчило бы головную боль верстальщика, да и пользователь перестал бы получать кривые письма. Да, это очень важная информация.

Ниже приведу несколько новых багов, которые стоит учесть при подготовке писем, а разработчикам — закрыть их.

Mail.ru

Как я уже сказал, у этих ребят все здорово, кроме одного маленького НО. Если мы указываем в письме номер телефона(просто текстом), этот самый номер трансформируется в псевдоссылку, синего цвета, при нажатии на которую, мы совершим звонок через mail.ru веб-agent.

<span class="js-phone-number highlight-phone" title="Позвонить через Веб-Агент">+7(952)123 45 67</span> 

Все бы ничего, только вот как стилизовать ее — большой вопрос. Хедерные стили — тут не помогают.

Яндекс почта

Тут куда больше расстройств. По порядку:

1. Рамки таблиц

<table width="400" cellpadding="0" cellspacing="0" style="border-collpase:collapse;"> <tr> <td width="50%" style="border-bottom:#999999 1px dashed;">текст<td> <td width="50%">текст<td> </tr> </table> 

Что мы ожидаем увидеть? Все просто. Левая ячейка таблицы должна получить пунктирную(dashed) нижнюю границу. Что мы получаем на самом деле? Левая ячейка получает solid границу, а правая — dashed. Почему? Не ясно.

2. line-height Приведу пример сверстанной кнопки:

<table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td><a style="color:white !important;" href="#">ссылка</a></td> </tr> </table> 

Все почтовики кроме я.почты отпарсят кнопку как и задумано. В случае же нашего героя, line-height будет ощутимо завышен. Все дело в том, что дефолтный line-height в я.почте изначально задан большим:

.b-message-body { line-height: 1.4; } 

, чем это принято в браузерах(1.2em). Но и тут не все так просто.

<table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td><a style="color:white !important; line-height:1.2em;" href="#">ссылка</a></td> </tr> </table> 

Не решает проблему. А вот так сработает:

<table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;"> <tr> <td style="line-height:1.2em;"><a style="color:white !important;" href="#">ссылка</a></td> </tr> </table> 

3. cellspacing
Тут все интереснее. Ранее этот атрибут в я.почте работал криво. Таблица просто разваливалась. Разработчики поступили очень интересно 🙂 Они просто отключили его вот так:

.b-message-body__content TABLE { border-collapse: collapse; } 

Это очень здорово, но решение плохое. Если нам не нужны отступы между ячейками мы можем просто указать cellspacing=«0» и все будет хорошо. Но не тут-то было. Ребята из майкрософта как всегда особенные. Именно для десктопного outlook необходимо коллапсировать таблицу во избежание однопиксельного зазора между ячейками таблицы. Поэтому у меня убедительная просьба к разработчиткам я.почты: «Пожалуйста, исправьте это недоразумение». Я буду рад, если этот пост заметит Роман Комаров kizu, т.к. мне не удалось с ним связаться по этим вопросам.

Мелочи жизни

Тут просьба к вышеуказанным разработчикам: Не могли бы вы ввести поддержку хедерных стилей хотя бы для ссылок? С учетом псевдоклассов: :link, :hover, :visited. Дело в том, что ссылки в письме выглядят мертвыми. Было бы здорово менять цвет ссылки при наведении на нее, или убирать text-decoration;

И еще одна деталь. Как насчет css свойства max-width? В основном именно из-за его отсутствия чаще всего приходится писать media_queries.

Спасибо, у меня все.