Автор изображения 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.
Спасибо, у меня все.
Автор: dudeonthehorse
