Встроенные стили для электронных писем

Многие почтовые клиенты — наиболее известный пример Gmail в браузере до мая 2016 года, а также несколько мобильных приложений, которые делают это до сих пор, — удаляют или переписывают блоки <style> и внешние таблицы стилей. Встроенные атрибуты style="..." — единственный вариант CSS, гарантированно сохраняющийся во всех клиентах.

Писать встроенные стили вручную невозможно поддерживать. Создавайте письмо с обычными тегами <style> и именами классов, а затем во время сборки запускайте инструмент встраивания стилей (Juice, Premailer, mjml), который копирует каждое правило в атрибут style соответствующего элемента перед отправкой.

Встроенные стили обладают самой высокой специфичностью, уступая только !important. Медиазапросу, который должен переопределить встроенное значение, необходимо использовать !important для каждого свойства, поскольку в противном случае встроенное объявление побеждает независимо от контекста @media.

Инструменты встраивания копируют только правила, соответствующие отдельным элементам; блоки @media остаются внутри тега <style>, поскольку их нельзя преобразовать в плоский список правил. Это нормально: Gmail и другие клиенты, удаляющие стили, сохраняют встроенные стили, а клиенты, поддерживающие теги <style>, применяют поверх них медиазапросы.

Некоторые клиенты неправильно обрабатывают сокращённые записи: font: 14px/1.4 Arial может быть полностью проигнорирована. Используйте полную форму (font-family, font-size, line-height), чтобы каждое свойство либо работало, либо независимо не срабатывало.

Тёмный режим автоматически инвертирует цвета во многих клиентах. Явная установка color и background-color для контейнеров текста предотвращает ситуации, когда чёрный текст оказывается на чёрном фоне. Всегда задавайте оба свойства вместе.

Для задания размеров придерживайтесь px. Поддержка rem, vh и vw различается. Проценты подходят для таблиц в макетах на всю ширину; абсолютные ширины в пикселях у внутренних таблиц и ячеек одинаково отображаются во всех клиентах.

Веб-шрифты через @font-face работают в Apple Mail, iOS Mail и Thunderbird, но не работают в Outlook и Gmail. Используйте безопасный для веба набор как встроенное значение (Arial, Helvetica, sans-serif), а @font-face оставляйте только как постепенное улучшение для клиентов, которые его поддерживают.

Встроенное свойство background-image у div работает в современных клиентах, но игнорируется Outlook. Используйте bgcolor как резервный вариант, а условный VML <v:rect> — для Outlook, чтобы каждый клиент отображал визуально эквивалентный фон, даже если полностью воспроизвести его невозможно.

Встроенные стили выглядят правильно в предварительном просмотре браузера, но в Gmail, Outlook или iOS Mail письмо всё равно может отображаться иначе. Используйте Litmus, Email on Acid или бесплатные предварительные просмотры Mailtrap, чтобы проверить каждый основной клиент перед отправкой кампании.

Добавьте небольшой сброс в теге <style> (margin: 0 для body, line-height: 100% для таблиц, border: none для изображений), чтобы нейтрализовать стили клиентов по умолчанию. Оберните его в медиазапрос, если хотите применять его только там, где учитывается <style>.

Почему для каждого свойства в медиазапросах HTML-письма требуется !important?

Для email нужны встроенные стили, чтобы они сохранялись после удаления стилей клиентом, но обычно задавайте стили в <style>, а при сборке добавляйте их встроенными. Используйте !important внутри медиазапросов, чтобы превысить специфичность встроенных стилей, отдавайте предпочтение свойствам в полной форме, а не сокращённым вариантам, явно задавайте color и background-color, придерживайтесь единиц px и проверяйте письмо в реальных клиентах перед отправкой.