Встроить CSS в HTML-письмо
Перенесите CSS в атрибуты style через Juice, сохраните media queries и исходные правила без загрузки внешних ресурсов.
Можно перетащить файл сюда
HTMLHTMTXT
HTML до 1 МБ, дополнительный CSS до 250000 символов; до 10000 элементов и 40 уровней вложенности.
Для обработки данные передаются нашему серверу. Временные рабочие файлы удаляются; история файлов не создаётся.
Как пользоваться
Настройка атрибутов таблиц дублирует подходящие размеры и оформление в HTML-атрибуты. Внешние CSS и активное содержимое отклоняются.
- Вставьте HTML или загрузите HTML в UTF-8 до 1 МБ; дополнительный CSS введите в отдельном поле.
- Выберите создание совместимых атрибутов таблиц и запустите встраивание.
- Скачайте HTML, проверьте style у нужного элемента, оставшиеся media queries и тестовую отправку в ваши клиенты.
Пример
Вымышленное уведомление о заказе №42
Письмо «Заказ №42 готов», правило .notice и мобильный @media; дополнительный CSS для ссылки .cta.
Запустите встраивание с включёнными HTML-атрибутами таблиц.
email-inlined.html: цвет и отступы в style элементов, .notice:hover и @media сохранены в исходной таблице стилей.
Форматы и ограничения
Примените CSS из style-блоков и дополнительного поля к элементам HTML. Juice учитывает каскад; исходные таблицы стилей сохраняются для условных и не встраиваемых правил.
- На входе
- HTML UTF-8, Дополнительный CSS
- Результат
- HTML UTF-8
email-inlined.html: цвет и отступы в style элементов, .notice:hover и @media сохранены в исходной таблице стилей.
- HTML до 1 МБ, дополнительный CSS до 250000 символов; до 10000 элементов и 40 уровней вложенности.
- Сумма символов CSS × число элементов — до 8000000, чтобы ограничить разрастание style.
- Внешние таблицы стилей, @import, скрипты, обработчики событий, формы, SVG, iframe, template и srcset отклоняются, в том числе внутри условных комментариев.
- URL изображений и обычных ссылок сохраняются как ссылки; сервер не загружает их. Изображения не вкладываются в HTML.
- Исходные style-блоки сохраняются целиком; условные и не встраиваемые селекторы остаются для клиента. Результат до 20 МБ, одинаковый вид во всех почтовых программах не гарантируется.
Проверьте конкретное правило: style элемента должен отражать каскад и !important. Убедитесь, что мобильный @media остался в style-блоке; затем сделайте тестовую отправку.
Исходный файл или текст передаётся серверу для обработки. Обработчик работает в памяти и не записывает содержимое писем или шаблона в постоянные файлы. Внешние CSS, изображения и ссылки сервер не загружает. Скачанный HTML не отображается на странице.
Исходный файл или текст передаётся серверу для обработки. Обработчик работает в памяти и не записывает содержимое писем или шаблона в постоянные файлы. Внешние CSS, изображения и ссылки сервер не загружает. Скачанный HTML не отображается на странице. Внешние изображения остаются URL; вид в конкретном клиенте проверяют тестовой отправкой.
Вопросы об инструменте
Какие стили попадут в атрибут style?
Juice применяет подходящие селекторы с учётом каскада и существующих inline-деклараций. Исходные style-блоки сохраняются полностью; условные правила и селекторы, которые нельзя встроить, остаются в них.
Останутся ли media queries и hover?
Да. Исходные style-блоки и дополнительный CSS сохраняются, включая @media, hover и другие правила. Их выполнение зависит от почтового клиента; сам инлайнер не эмулирует мобильный Outlook или Gmail.
Загружается ли CSS по ссылке?
Нет. link и CSS @import отклоняются. Скопируйте доверенный CSS в дополнительное поле либо в style исходного HTML. Сервер не читает URL и локальные пути из письма.
Что меняет настройка атрибутов таблиц?
Она разрешает Juice дублировать поддерживаемые значения ширины, высоты и оформления таблиц в width, height, bgcolor и другие HTML-атрибуты. Исходные CSS-значения остаются; это не исправляет всю несовместимость старого Outlook.
Встраиваются ли изображения внутрь HTML?
Нет. HTTP/HTTPS и cid-ссылки сохраняются как ссылки. Внешнюю картинку может позднее запросить почтовый клиент, а cid требует соответствующего MIME-вложения при отправке. Архив с картинками инструмент не собирает.
Почему скрипт или srcset приводит к ошибке?
Принят ограниченный профиль пассивного email HTML. Скрипты, обработчики событий, формы, iframe, SVG, template, внешние CSS, опасные URL и srcset отклоняются, включая условные комментарии. Подготовьте статическую версию письма с одним src на изображение.
Разобраться в задаче
Все инструкцииCSS в HTML-письме: что встроить, что оставить и как проверить каскад
Разберите специфичность, inline !important, мобильные правила, HTML-атрибуты таблиц и внешние изображения после CSS inlining.
Читать инструкциюИнструменты разработчика6 минMJML в HTML: собрать самостоятельный шаблон и пройти strict
Исправьте структуру MJML, замените includes и веб-шрифты, проверьте raw-блоки и подготовьте HTML к тестовой отправке.
Читать инструкцию