От автора: в прошлом году Gmail выпустили самое большое обновление, был добавлен адаптивный дизайн и поддержка медиа запросов. Однако от разработчиков посыпалось множество вопросов, у них не работал адаптивный дизайн в письмах Gmail. Ниже я составил список из семи вещей, которые нужно держать в голове, чтобы адаптивный дизайн заработал в Gmail.
1. Какой версией Gmail вы пользуетесь?
В Gmail поддержка CSS зависит от разных факторов. Я уже писал об этом, когда пытался разобраться в поддержке CSS в Gmail. Суть статьи сводится к тому, что адаптивный дизайн должен работать во всех версиях Gmail за исключением почты на мобильном устройстве, Google Apps Free Edition и GANGA (Gmail Android с аккаунтом не Gmail).
Если вам нужно оптимизировать письма на мобильных устройствах под описанные выше версии Gmail, попробуйте гибкое/гибридное решение или адаптивные письма без медиа запросов.
2. Вы обновились?
Веб-версии почты на настольном компьютере и приложению для Android не нужны обновления, чтобы заработал адаптивный дизайн. Все обрабатывается на сервере. Приложение на Android может потребовать полной перезагрузки телефона или очистку кэша в случае, если вы хотите увидеть обновления в уже просмотренных сообщениях.
На iOS требуется полное обновление, которое вышло 7 ноября 2016. Проверьте, чтобы на iOS у вас была версия Gmail 5.0.0 или выше. Посмотреть версию можно в настройках.
3. Вы используете селекторы с атрибутами?
В недалеком прошлом селекторы с атрибутами в CSS были довольно популярны в адаптивных шаблонах почты, особенно в медиа запросах.
|
1 2 3 |
@media only screen and (min-width:480px) { div[class="column"] { width: 50%; } } |
До марта 2015 у Yahoo был баг с медиа запросами. Медиа запросы неправильно парсились, что приводило к тому, что CSS правила выходили за пределы обозначенных запросов, тем самым применяясь ко всем пользователям Yahoo. Тогда эту проблему решили, переделав все CSS селекторы в медиа запросах в селекторы с атрибутами (типа [class=»foo»] { } вместо .foo { }). Селекторы с атрибутами не поддерживались, поэтому Yahoo фильтровала эти правила. Yahoo баг пофиксили, однако с тех пор множество шаблонов писем не обновлялось и до сих пор содержит атрибуты с селекторами.
Gmail не поддерживает селекторы с атрибутами, точка. Проверьте, чтобы их не было в коде, иначе Gmail отфильтрует их.
4. У вас много стилей?
С последним обновлением в прошлом году Gmail теперь поддерживает 8192 байта стилей. (Со слов Eric Lepetit с сайта Emailgeeks Slack Gmail недавно стал поддерживать 16384 байта) Gmail обрабатывает стили только в пределах этого значения. Разбейте ваш код на несколько тегов style и самые важные поместите как можно выше.
5. В коде используется @ внутри @?
Gmail удаляет теги style, в которых есть объявление @ внутри другого @. Зачастую такой код встречается в двух случаях.
При объявлении веб-шрифтов. Один из рекомендуемых способов вставки веб-шрифтов в сообщение – импортировать их в @media запросе, чтобы Outlook 2007 и выше не конвертировали их в Times.
|
1 2 3 4 5 6 7 8 9 |
@media { @font-face { font-family: 'Proxima Nova Regular'; src: url('proximanova-regular-webfont.woff') format('woff'), url('proximanova-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } } |
При объявлении вьюпорта для Windows Phone 8.1. Клиент почты по умолчанию в Windows Phone 8.1 не поддерживает адаптивный дизайн и медиа запросы. Вам нужно прописать и задать вьюпорт в CSS с помощью правила @viewport.
|
1 2 3 4 |
@media only screen and (max-width:480px) { @-ms-viewport { width:320px; } @viewport { width:320px; } } |
Если у вас есть похожие объявления в коде, вынесите их в отдельные теги style. Тогда Gmail отфильтрует только эти теги, а все остальное оставит.
6. Ваши стили валидные?
Парсер Gmail CSS очень чувствительный. Любой специальный символ не допускается в стилях (это могут быть инлайновые стили или стили в теге style. Например, код ниже…
|
1 |
<div style="background:#3cbc67; font-size:3*px;">foo</div> |
… Gmail трансформирует в:
|
1 |
<div>foo</div> |
Заметили символ * в первом объявлении? Конечно, это грубая ошибка. Такое может случиться при копировании кода, рефакторинге, а также при сильной усталости.
То же самое касается целенаправленных стилей. Например, техника по определению IE (от версии 6 до 9) требует, чтобы в конце свойства добавлялась надпись \9. Любые атрибуты или теги style с такой записью (как в примере ниже) будут удаляться в Gmail.
|
1 2 3 4 |
<style> .foo { background:#3cbc67; } .bar { color:#fff; color:red\9; } </style> |
По моим тестам любой из следующих символов в блоке стилей сводит Gmail с ума: =, *, /, $, %, \, &, @, ^, {, }, [, ], (, ), ?, |, <, >. Старайтесь проводить валидацию вашего CSS кода, если это возможно. И опять же, разбивайте код на множество тегов style.
7. Включен ли показ изображений?
И напоследок, Mark Robbins нашел сумасшедший баг прямо после последнего обновления Gmail в том году. В веб-версии Gmail на настольном компьютере, когда стоит настройка «Ask before displaying external images», над сообщением появляется баннер «Images are not displayed» со ссылкой «Display images below» (показать изображения).
При клике на «Display images below» HTML код письма будет распарсен, но уже с другим префиксом, не с тем, который используется в CSS. Правила CSS перестают совпадать с HTML, и письма ломаются. Например, с отключенными изображениями следующий код…
|
1 2 3 4 5 6 7 |
<style> .foo { background:#39b54a; } </style> <p class="foo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <img src="spacer.gif" alt="This image is blocked." /> |
… превращается в Gmail в:
|
1 2 3 4 5 6 7 8 9 |
<div class="m159215f7d36ee7fd"> <style> div.m159215f7d36ee7fd .m_3567455155959655244foo { background:#39b54a; } </style> <p class="m_3567455155959655244foo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <img alt="This image is blocked." /> </div> |
После клика на ссылку «Display images below» код становится таким:
|
1 2 3 4 5 6 7 8 9 |
<div class="m159215f7d36ee7fd"> <style> div.m159215f7d36ee7fd .m_3567455155959655244foo { background:#39b54a; } </style> <p class="m_-8249599400804587256foo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <img alt="This image is blocked." /> </div> |
Префикс класса foo на теге
изменился, но только на самом теге. На теге style ничего не изменилось.
Новая версия Gmail определенно лучше старой, CSS стал умнее. Однако все еще очень много свойств и багов, которые затрудняют новичкам знакомство с Gmail. Нашли другие баги в Gmail? Пишите об этом в комментариях.
Автор: Rémi Parmentier
Источник: //emails.hteumeuleu.com/
Редакция: Команда webformyself.
