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

Антон Чирков

технический консультант EMAILMATRIX, основатель Pixcraft

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

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

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

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

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

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

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

Вёрстка писем для емейл-рассылки: разбираем пять способов оптимизации

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

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

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

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

background-image:linear-gradient(#000000,#000000);

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

background-clip: text;
background-image:linear-gradient(#fff,#fff);
color: transparent;

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

Чтобы это исправить, воспользуемся селектором, который отработает только в 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, интерпретироваться оно всё равно не будет.

Как сверстать письмо, которое затянет и восхитит подписчиков. «Глубокий» кейс EMAILMATRIX

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

Поэтому мы воспользуемся селектором, чтобы отделить стили 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, и сохранить тёмные письма тёмными.