CSS в HTML-письме: что встроить, что оставить и как проверить каскад

Выбрать победившую декларацию по каскаду

Возьмите один спорный элемент и перечислите правила, которые на него действуют: тег p, класс .notice, идентификатор #main и уже записанный style. Не оценивайте результат по порядку строк в HTML. Специфичность, порядок CSS и !important влияют на то, какое значение Juice перенесёт в атрибут.

Например, существующий style="color:black!important" должен сохранить чёрный цвет при обычных правилах p{color:red} и #main{color:blue}. Если ожидается другой цвет, сначала исправьте источник. Инлайнер не выбирает визуально приятное оформление и не считает inline-правило случайной помехой.

Официальные требования: Juice: каскад, style и сохранение CSS

<style>#main{color:blue}</style>
<p id="main" style="color:black!important">Заказ готов</p>

<p id="main" style="color: black !important;">Заказ готов</p>

Оставить правила, зависящие от состояния и ширины

@media нельзя свести к одному постоянному style: ширина устройства станет известна только у получателя. То же относится к hover и другим состояниям. Поэтому здесь сохраняются исходные style-блоки целиком, а дополнительный CSS также остаётся в отдельном блоке после применения.

Сохранение правила не означает, что любой клиент его выполнит. Условное правило может проиграть встроенной декларации, если в источнике не задан нужный приоритет. Проверяйте мобильную ветку на конкретном элементе и не добавляйте !important во все строки автоматически: это усложнит последующие правки.

Передать локальный CSS, а не ссылку на него

HTML можно вставить или загрузить в UTF-8, а доверенный CSS добавить отдельным текстом. link и @import отклоняются: сервер не открывает сайт, не читает локальный путь и не собирает зависимости. Это даёт воспроизводимый вход без скрытого запроса к внутренней сети.

Если CSS раньше подключался с CDN, сначала получите его в своей рабочей среде, проверьте и вставьте нужные правила. Ограничение HTML — 1 МБ, дополнительного CSS — 250000 символов. Скрипты, формы, обработчики событий, SVG, iframe и srcset также не входят в поддерживаемый профиль письма.

Размер файла не единственный предел: сумма символов CSS, умноженная на число элементов, не должна превышать 8000000. Одно короткое правило на тысячах элементов многократно увеличивает результат. При такой ошибке удалите неиспользуемые правила или разделите письмо на меньшие самостоятельные шаблоны.

1. Сохраните самостоятельный HTML в UTF-8 без link и @import.
2. Добавьте нужный CSS в отдельное поле; исходник оставьте для сравнения.
3. Запустите обработку и проверьте спорные элементы в скачанном коде.

Настройка таблиц помогает только с подходящими свойствами

Флажок атрибутов таблиц позволяет Juice дублировать подходящие значения в width, height, bgcolor и другие HTML-атрибуты. Например, явно заданная ширина таблицы в пикселях может получить width. Это практично для старых клиентов, но не превращает сложный flex или grid в табличную верстку.

Если атрибут меняет поведение письма в вашем шаблоне, повторите обработку с выключенным флажком и сравните конкретную таблицу. Не удаляйте все width из готового HTML без проверки: размеры могли быть частью исходного макета. Для такого сравнения достаточно двух файлов и одного тестового получателя.

URL картинки не является вложенной картинкой

src="https://example.com/logo.png" остаётся URL. Сервер не скачивает изображение и не превращает его в data URI. При доставке почтовый клиент может блокировать внешнюю загрузку, поэтому добавьте содержательный alt и не помещайте единственную важную информацию внутрь картинки.

cid:logo требует MIME-вложения с соответствующим Content-ID в настоящем письме. HTML-файл сам по себе такого вложения не содержит. Проверьте, как ваш сервис рассылки формирует MIME, прежде чем менять HTTP-ссылку на cid. Также убедитесь, что ссылка кнопки ведёт к нужному заказу после обработки.

Закончить проверкой в выбранных почтовых клиентах

Откройте скачанный код как текст и найдите основной текст, href кнопки, style спорного элемента и мобильный @media. На странице инструмента HTML не исполняется и не отображается в iframe. Этот результат позволяет проверить преобразование, но не моделирует поведение почтового приложения.

Перенесите HTML в ваш сервис рассылки и отправьте тест в реальные настольные и мобильные клиенты аудитории. Сравните ширину, отступы, размер текста, вид без картинок и действие кнопки. Запишите клиент и версию рядом с результатом; утверждение «работает в Outlook» без версии слишком расплывчато.