Нужно ли инлайнить CSS в HTML-письмах?
Да. Многие клиенты убирают теги <style> и внешний CSS. Критичные стили (шрифты, отступы, цвета, display) задавайте инлайном на каждом элементе. Держите head лёгким и не подключайте внешние таблицы стилей.
Кратко
- ✓Инлайн-стили сохраняются в Gmail, Outlook, Yahoo.
- ✓Внешний CSS и большинство медиа-запросов во многих клиентах удаляются.
- ✓html2email помечает опору на
<style>, чтобы вы могли перенести стили в инлайн.
Да. Многие клиенты убирают теги <style> и внешний CSS. Критичные стили (шрифты, отступы, цвета, display) задавайте инлайном на каждом элементе. Держите head лёгким и не подключайте внешние таблицы стилей.
Почему клиенты убирают теги style?
Фильтры безопасности удаляют или переписывают стили из head. Gmail и Outlook часто удаляют или искажают CSS в head, инлайн обычно остаётся.
Что обязательно инлайнить?
Типографику (font-family, size, color), отступы (padding/margin), display (block/inline-block), ширины/высоты, фоны, границы. Держите набор минимальным.
А медиа-запросы?
Поддерживаются в Gmail и Apple Mail, но не в Outlook на десктопе. Держите запросы минимальными и инлайньте мобильно-безопасную вёрстку на таблицах.
Можно ли использовать классы?
Можно, но критичные правила дублируйте инлайном. Часть ESP удаляет определения классов из head.
Как html2email находит рискованные стили?
InlineStyleValidator помечает внешние стили или CSS только в head и рекомендует инлайнить критичные свойства.
Работают ли веб-шрифты?
Ограниченно. Всегда задавайте запас (Arial, Helvetica, Georgia) и инлайньте font-family. Outlook часто игнорирует веб-шрифты.
Раздует ли инлайн HTML?
Частично, но так надёжнее. Держите HTML до 100 КБ, чтобы не попасть под обрезку Gmail; переиспользуйте фрагменты и аккуратно минифицируйте.
Инлайнить ли hover?
Hover плохо поддерживается. В приоритете базовые стили; hover добавляйте только там, где клиент его поддерживает, и не полагайтесь на него для ясности.
Валидатор подсвечивает использование style вместо инлайна.
Цифры и источники
- Gmail по умолчанию убирает CSS из head; инлайн остаётся.
- Outlook игнорирует многие правила из head, но учитывает инлайн.
- html2email помечает опору на теги
<style>, чтобы вы могли перенести критичный CSS в инлайн.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации