Содержание

    Исправляем отображение писем в тёмной теме Gmail на iOS

    Тёмная тема в письмах давно стала отдельной головной болью маркетологов. Автоматическое преобразование цвета нужно учесть и на уровне дизайна, и при вёрстке. Ещё больше проблем создаёт приложение Gmail для iOS, которое перекрашивает не только светлое в тёмное, но и тёмное в светлое, применяя полную инверсию яркости:

    тёмная тема Gmail

    По статистике EMAILMATRIX, около половины пользователей iOS предпочитают тёмную тему, поэтому важно учитывать эту особенность Gmail, которая ломает отображение тёмных писем и делает некоторые элементы совершенно нечитабельными. Но на деле про неё очень часто забывают, и подписчики видят на своих iPhone вот такие письма:

    тёмная тема Gmail

    тёмная тема Gmail

    И вот такие кнопки:

    тёмная тема Gmail

    В статье расскажу о поисках собственного решения, которое позволило исправить эту проблему.

    Как проблему решают обычно

    Самый очевидный и простой вариант — сделать нужные элементы изображениями. Но это крайне неудобно для вёрстки: значительно сложнее менять текст, делать локализацию письма, вносить правки, переиспользовать макет. Ну и мобильная адаптация в таком случае возможна почти только за счёт масштабирования — а это неприменимо для полноценного текстового блока, так как текст получится нечитабельным. Наконец, если письмо полностью тёмное и хочется сохранить это в Gmail на iOS, то применить такой метод почти невозможно.

    Я искал способы обойти эту проблему при разработке фреймворка Ampier, когда создавал инструмент для тестирования тёмной темы, но готовых решений не нашёл. Есть интересный вариант с использованием blend-mode, но он не в полной мере соответствует современным реалиям и имеет ряд недостатков.

    Например, он не учитывает, что рендеринг в Gmail на iOS и Android различается, причём как в поддержке стилевых свойств, так и в работе тёмной темы. Для белого текста на очень тёмном фоне способ сработает корректно, но если фон будет хоть немного светлее, то на Android он инвертируется (использование градиента не останавливает Android-приложение от перекраски), в то время как на iOS останется светлым. Аналогично с текстом: если он будет не белым, то рендеринг также будет сильно различаться.

    Итак, как же обойти проблему с тёмной темой в Gmail на iOS и не резать всё письмо на картинки?

    Поиск подходящего решения

    Gmail на iOS знает, как перекрашивать обычный цвет, но не знает, что делать с градиентами. Поэтому зальём нужный блок не цветом, а градиентом — с чёрного на чёрный, чтобы этот цвет сохранился в Gmail на iOS.

    background-image:linear-gradient(#000000,#000000);
    тёмная тема в Gmail

    Что же с текстом? Тут та же история: заливаем текстовый блок градиентом (в моём примере — с белого на белый), шрифт делаем прозрачным и заливаем его через:

    background-clip: text;
    background-image:linear-gradient(#fff,#fff);
    color: transparent;
    тёмная тема в Gmail

    Теперь в Gmail на iOS всё выглядит хорошо. Однако это вызвало проблемы в других почтовых клиентах, которые не поддерживают стилевое свойство background-clip. Они игнорируют его и воспринимают только цвет фона, и мы видим вот такую картину:

    тёмная тема в Gmail

    Чтобы это исправить, воспользуемся селектором, который отработает только в Gmail. Для этого добавим класс body тегу body, и селектор будет иметь вид:

    u+.body .selector

    где .selector — это наш класс для таких элементов.

    Теперь эти стили работают только в Gmail. Проверка в веб-интерфейсе Gmail показала, что в Firefox всё хорошо, но в Chrome по-прежнему белые полосы — из-за проблем с поддержкой background-clip у этого браузера. Поэтому ограничим применение стиля на десктопах, воспользовавшись медиазапросом:

    @media only screen and (max-width:480px){
    }

    Может возникнуть логичный вопрос: почему не воспользоваться свойством -webkit-background-clip, которое «нравится» Chrome? Всё очень просто: его вырежет сам Gmail, интерпретироваться оно всё равно не будет.

    Десктоп починили, но появился баг в Android-приложении, в котором до этого всё было нормально. Gmail на Android, во-первых, не поддерживает background-clip и, во-вторых, знает, как перекрашивать градиенты. Так что прямоугольники теперь чёрные.

    тёмная тема в Gmail

    Поэтому мы воспользуемся селектором, чтобы отделить стили Gmail на Android от iOS и отменим ранее применённые.

    Это можно сделать с помощью конструкции:

    div > u + .body .selector

    Результат

    В итоге наш CSS-код примет следующий вид:

    <style>
        @media only screen and (max-width:480px){
       	 u + .body .white-text{
       		 background-image:linear-gradient(#ffffff,#ffffff);
       		 background-clip: text;
       		 color: transparent;
       	 }
       	 div > u + .body .white-text{
       		 background-image:none;
       		 background-clip: inherit;
       		 color: #ffffff;
       	 }   	 
        }
    </style>

    Теперь мы можем использовать в письме наш класс .white-text там, где хотим сохранить белый (или любой другой) цвет текста, невзирая на особенности тёмной темы Gmail на iOS. А для сохранения тёмного фона:

    <style>
        @media only screen and (max-width:480px){
       	 u + .body .dark-bg{
       		 background-image:linear-gradient(#000000,#000000);
       	 } 	 
        }
    </style>
    

    Тогда HTML-код тёмного блока с белым текстом будет иметь примерно следующий вид:

    <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tr><td class="dark-bg" bgcolor="#000000">
       	 <span style="font-family: Arial, sans-serif; font-size: 14px; color: #ffffff;">
    <span class="white-text">The best<br>laptop deals </span></span>
        </td></tr>
    </table>
    

    Эта методика позволяет полностью избавиться от проблем, которые несёт в себе тёмная тема Gmail на iOS, и сохранить тёмные письма тёмными.

    Дарим гайд по тёмной теме в рассылках
    Пришлём на почту
    Имя
    Email *
    Array
    (
        [0] => WP_Term Object
            (
                [term_id] => 1425
                [name] => Статьи
                [slug] => articles
                [term_group] => 0
                [term_taxonomy_id] => 1907
                [taxonomy] => category
                [description] => 
                [parent] => 0
                [count] => 660
                [filter] => raw
                [cat_ID] => 1425
                [category_count] => 660
                [category_description] => 
                [cat_name] => Статьи
                [category_nicename] => articles
                [category_parent] => 0
            )
    
    )
    
    Поделиться статьёй
    Подписаться на рассылку