Apple Mail входит в число крупнейших почтовых клиентов и используется на iPhone, iPad и компьютерах macOS. Для email-разработчиков он представляет интерес по двум причинам. С одной стороны, клиент построен на движке WebKit и поддерживает многие современные возможности HTML и CSS. С другой — имеет собственные особенности, которые влияют на отображение писем и корректность аналитики.
При разработке рассылок для Apple Mail необходимо учитывать работу тёмной темы, Mail Privacy Protection (MPP), автоматическое преобразование телефонов и адресов в ссылки, а также различия между мобильной и десктопной версиями приложения.
В этой статье собраны актуальные данные по поддержке HTML и CSS в Apple Mail, примеры кода и рекомендации по тестированию писем.
Поддержка HTML и CSS
Разметка и структура
Возможность | iPhone Mail | iPad Mail | Mac Mail | Комментарий |
|---|---|---|---|---|
Табличная вёрстка (table) | ✅ | ✅ | ✅ | Основной способ построения email-макетов |
max-width | ✅ | ✅ | ✅ | Поддерживается |
inline-block | ✅ | ✅ | ✅ | Подходит для адаптивных колонок |
Гибкие контейнеры (Flexbox) | ✅ | ✅ | ✅ | Поддерживается, но редко используется как основа email-макета |
Сеточная раскладка (CSS Grid) | ✅ | ✅ | ✅ | Поддерживается, но не подходит для кросс-клиентной вёрстки |
Медиа-запросы (@media) | ✅ | ✅ | ✅ | Поддерживаются |
Основой email-вёрстки для Apple Mail остаются таблицы. Несмотря на частичную поддержку современных CSS-механизмов, именно табличная структура обеспечивает наиболее стабильное отображение в разных почтовых клиентах.
CSS-возможность | Поддержка |
|---|---|
CSS-анимации (@keyframes) | ✅ |
Переходы (transition) | ✅ |
Трансформации (transform) | ✅ |
Тёмная тема (prefers-color-scheme) | ✅ |
Абсолютное позиционирование (position:absolute) | ⚠️ |
Фиксированное позиционирование (position:fixed) | ❌ |
Медиазапросы поддерживаются на всех платформах Apple и позволяют адаптировать макет под разные размеры экранов, менять расположение колонок и управлять отображением элементов в тёмной теме.
Шрифты и типографика
Возможность | iPhone Mail | iPad Mail | Mac Mail | Комментарий |
|---|---|---|---|---|
Системные шрифты | ✅ | ✅ | ✅ | Поддерживаются |
@font-face | ✅ | ✅ | ✅ | Поддерживается загрузка внешних шрифтов |
Google Fonts | ✅ | ✅ | ✅ | Требуется резервный стек |
-webkit-text-size-adjust | ✅ | ✅ | ✅ | Рекомендуется использовать |
Автоматическое распознавание телефонов | ⚠️ | ⚠️ | ❌ | Актуально для iOS |
Apple Mail поддерживает внешние шрифты через @font-face и Google Fonts. Однако в других популярных клиентах такая возможность отсутствует или работает с ограничениями, поэтому для каждого шрифта необходимо указывать резервный набор шрифтов.
font-family: «Montserrat», Arial, Helvetica, sans-serif;
Для мобильных устройств рекомендуется использовать:
-webkit-text-size-adjust: none;
Без этого свойства iOS может автоматически увеличивать отдельные фрагменты текста.
Фоновые изображения и графика
Возможность | iPhone Mail | iPad Mail | Mac Mail | Комментарий |
|---|---|---|---|---|
background-image | ✅ | ✅ | ✅ | Поддерживается |
background-size: cover | ✅ | ✅ | ✅ | Поддерживается |
Retina-изображения | ✅ | ✅ | ✅ | Рекомендуются |
WebP | ✅ | ✅ | ✅ | Поддерживается |
GIF-анимация | ✅ | ✅ | ✅ | Поддерживается |
Для фоновых изображений достаточно стандартного CSS:
background-image: url(bg.png);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
В отличие от Outlook для Windows дополнительные конструкции на основе VML не требуются.
Для экранов высокой плотности пикселей рекомендуется использовать изображения в двойном разрешении и ограничивать их размеры через width и max-width.
Тёмная тема
Apple Mail поддерживает тёмную тему и автоматически изменяет цвета интерфейса в зависимости от настроек устройства. Светлые фоны могут становиться тёмными, а тёмный текст — светлым. Изображения при этом обычно остаются без изменений.
На практике это может привести к проблемам с логотипами, иконками и элементами интерфейса, рассчитанными только на светлый фон.
Для управления отображением рекомендуется добавить в <head>:
<meta name=»color-scheme» content=»light dark»>
<meta name=»supported-color-schemes» content=»light dark»>
и использовать отдельные стили для тёмной темы:
@media (prefers-color-scheme: dark) {
.body-bg {
background-color: #1e1e1e !important;
}
.dark-text {
color: #f5f5f5 !important;
}
}
Перед отправкой письмо желательно проверить как минимум в двух режимах отображения.
Mail Privacy Protection (MPP)
С выходом iOS 15 Apple включила Mail Privacy Protection для пользователей Apple Mail.
Технология загружает изображения через прокси-серверы Apple ещё до фактического открытия письма. В результате пиксель отслеживания может сработать независимо от того, просмотрел пользователь сообщение или нет.
Влияние MPP на аналитику
Функция | Поведение | Последствие |
|---|---|---|
Пиксель открытия | Предзагружается | Open Rate не может использоваться как точный показатель реальных открытий. |
Определение IP | Скрывается | Геолокация недоступна |
Время открытия | Не фиксируется точно | Метрика теряет достоверность |
Клики по ссылкам | Работают штатно | Остаются основным источником данных |
После внедрения MPP открываемость перестала быть надёжным показателем вовлечённости. Для оценки эффективности рассылок целесообразно использовать данные о кликах, конверсиях и действиях пользователя после перехода.
Автоматическое форматирование
На iPhone и iPad Apple Mail автоматически распознаёт телефонные номера, адреса и даты, преобразуя их в ссылки системного цвета.
Это может приводить к изменению дизайна письма. Чтобы сохранить контроль над оформлением, телефоны рекомендуется сразу размечать как ссылки:
<a href=»tel:+74951234567″
style=»color:inherit;text-decoration:none;»>
+7 (495) 123-45-67
</a>
В этом случае Apple Mail использует стили, заданные разработчиком.
Интерактивные элементы
Возможность | iPhone Mail | iPad Mail | Mac Mail |
|---|---|---|---|
CSS-анимации | ✅ | ✅ | ✅ |
Раскрывающиеся блоки (CSS Accordion) | ✅ | ✅ | ✅ |
HTML-формы | ⚠️ | ⚠️ | ⚠️ |
:hover | ❌ | ❌ | ✅ |
Видео HTML5 | ⚠️ | ⚠️ | ✅ |
AMP for Email | ❌ | ❌ | ❌ |
Apple Mail поддерживает ряд интерактивных сценариев, включая аккордеоны на CSS, анимации и некоторые HTML-формы внутри письма.
Однако такие элементы следует рассматривать как дополнительное улучшение интерфейса. Для Gmail, Outlook и других клиентов рекомендуется предусматривать альтернативные сценарии отображения.
Apple Mail, Outlook и Gmail: сравнение возможностей
Возможность | Apple Mail | Outlook (Windows) | Gmail |
|---|---|---|---|
@font-face | ✅ | ❌ | ❌ |
Фоновые изображения | ✅ | ❌ | ✅ |
Медиа-запросы | ✅ | ❌ | ⚠️ |
Accordion-блоки | ✅ | ❌ | ❌ |
HTML-формы | ⚠️ | ❌ | ❌ |
AMP for Email | ❌ | ❌ | ✅ |
Тёмная тема через @media | ✅ | ⚠️ | ❌ |
:hover | ✅ (macOS) | ❌ | ❌ |
Что проверить перед отправкой
☐ Проверено отображение в светлой теме
☐ Проверено отображение в тёмной теме
☐ Добавлены резервные шрифты
☐ Телефоны оформлены ссылками
☐ Подготовлены изображения повышенной чёткости
☐ Для интерактивных элементов предусмотрен альтернативный сценарий
☐ Письмо протестировано в Apple Mail
Apple Mail поддерживает большинство технологий, используемых в современной email-вёрстке, включая медиазапросы, веб-шрифты, фоновые изображения и ряд интерактивных элементов. Основные сложности связаны не с рендерингом HTML и CSS, а с особенностями платформы: Mail Privacy Protection, тёмной темой и автоматическим форматированием контента.
При разработке рассылок рекомендуется тестировать письмо как минимум в мобильной и десктопной версиях Apple Mail, а также проверять отображение в светлой и тёмной темах.
Как Letteros помогает с Apple Mail
Проверять письмо в реальном Apple Mail перед каждой отправкой вручную — долго. В Letteros встроена функция рендеринга в 100+ почтовых клиентах, включая Apple Mail iPhone разных версий, iPad и Mac Mail.
- Предпросмотр тёмной темы — прямо в редакторе, кнопка «◑» в нижней панели
- Адаптивная вёрстка по умолчанию — медиазапросы уже в шаблоне
- Типограф — расставляет неразрывные пробелы, снижая шансы на автоформатирование
- Мастер-шаблон — один раз настраиваете резервные шрифты, тёмную тему и стили для всех писем
Читайте также: