В нашем блоге мы часто пишем о создании адаптивных почтовых рассылок(раз, два, три) и вообще уделяем большое внимание email-верстке. Сегодня речь пойдет о способе создания адаптивных писем для почтового клиента Gmail, известного своей довольно скудной поддержкой различных возможностей для верстки. Данную технику в 2014 году описал Джастин Ху (Justin Khoo), позднее метод был дополнен статьей Марка Роббинса в блоге Email Code Geek. Мы представляем вашему вниманию адаптированный перевод основных моментов двух публикаций.

Интерактивные письма в Gmail

Gmail позволяет симулировать CSS-селекторы классов, для этого нужно использовать атрибуты, которые почтовый сервис не вырезает (например,title). Ниже представлен код для создания в письме кнопки с hover-эффектом. Также в код добавлены содержащий два селектора классов (.divbox) и атрибута (class=”divbox”), чтобы эффект сработал и в почтовых клиентах, вырезающих селекторы атрибутов (например, в Yahoo! Mail).

<>
<>
<style>
.divbox,
* [lang~="x-divbox"]:hover{
  background-color: green !important;
  color: white;

</style>
</>
<>
< class="divbox" ="x-divbox" style="padding:10px;width:100px;height:40px;
background-color:#eeeeee;">Divbox Content</>
</>

Использованный в этом коде атрибут lang входит в число немногих атрибутов, которые Gmail не вырезает (в этом списке title, lang, width, alt,href). Здесь можно было бы использовать title, но у него есть один «побочный эффект» — при наведении курсора, этот заголовок был бы видим. Lang же, в свою очередь, универсален (подходит для всех элементов) и не появляется при наведении.

В спецификациях HTML данный атрибут предполагается использовать по-другому. Поэтому здесь используется префикс “x-”, который говорит почтовому клиенту не обрабатывать атрибут lang.

А здесь перечислены все стили, работоспособность в Gmail которых подтвердилась экспериментами Джастина Ху:

* [foo]
* [foo="bar"]
* [foo~="bar"]
* [foo^="bar"]
* [foo*="bar"]
* [foo$="bar"]
* :hover
* :link
* :visited
* :active
 
 > 
 + 
 ~ 

Ниже представлено описание того, как Gmail обрабатывает CSS в заголовке письма:

.divbox {..}  //Разрешено, но бесполезно - Gmail вырезает из элементов атрибуты классов 
#divbox {..}  //Разрешено, но бесполезно - Gmail вырезает из элементов id-атрибуты 
 
[class~="divbox"] {...} //Удален Gmail
* [class~="divbox"] {...} //Разрешено, но бесполезно — нет атрибутов классов 
 
div {...} //Разрешен, но не особенно полезен
div:hover {...} //Удалено Gmail. Псевдоклассы не поддерживаются? Не совсем так!
* div:hover {...} //Разрешено! Уже интереснее…
 
* [lang~="x-divbox"] {...} //Разрешено, с этим можно работать
 
* [lang~="x-divbox"]:hover {...} //Разрешено! То, что нужно!

Добавляем адаптивность

Вот, к чему мы стремимся (цветом отмечены «точки прерываний» для разных размеров экрана):

Если при создании письма используется заданная максимальная ширина в 600 пикселей, то первую «точку прерывания» (breakpoint) можно было бы установить именно на этой отметке, однако Gmail учитывает ширину окна браузера, а не контейнера email-сообщения, как делают некоторые другие почтовые программы.

В таком случае, первый медиазапрос можно использовать на отметке в 1160 пикселей — при этом ширина email-контейнера составит как раз 600 пикселей.

    @media screen and (max-width:px){
        * [lang=x-outer]{
            width:% !important;
        
    }

Когда окно браузера будет сужено до 700px, то ширина области письма составит уже всего 450px. Если ширина будет еще меньше, появится горизонтальный скролл, который является не самым удобным элементом навигации.

Чтобы этого избежать, нужно установить ширину на отметке в 100% ширины экрана минус 250 пикселей для колонки, зафиксированной в левой части экрана.

    @media screen and (max-width:px){
        * [lang=x-outer]{
            width:calc(vw - px) !important;
            float:left;
        
    }

Здесь используются единицы измерения vw1 vw = 1% viewport width (в данном случае, окна браузера). При этом процентами описывается размер элемента, содержащегося в контейнере (в нашем случае, зафиксированном на 450px). Затем для осуществления подсчетов используется функция Calc (умеет работать с величинами px, %, em, rem, vw, vh и т.п.)

В данном случае наш email будет не уже 300 пикселей. Поэтому эти 300px добавляются к 250px левой колонки, кроме того, используется медиазапрос, фиксирующий ширину на 300px:

 @media screen and (max-width:px){
        * [lang=x-outer]{
            width:px !important;
        
    }

Описанная выше техника хорошо подходит для использования при создании mobile friendly-писем (если не брать смартфоны и планшеты, то редко кто просматривает почту на экране меньше 1160px в ширину).

Под спойлером представлен полный код примера (также поработать с ним можно на Codepen):

Код примера

С помощью использования атрибутов, которые Gmail не вырезает и применения к стилям универсальных селекторов, можно создавать интерактивные и отзывчивые письма даже для этой почтовой службы. Однако, это не значит, что можно перестать использовать инлайн CSS-код — мобильные приложения Gmail и Gmail For Businesses не поддерживают тег <style>.

Источник: http://habrahabr.ru/company/pechkin/blog/263699/