Встройте CSS письма в атрибуты
Outlook и несколько веб-клиентов игнорируют или вырезают блок <style>. Встраивание — это скучный механический шаг между дизайном, который работает в браузере, и дизайном, который работает в почтовом ящике.
- Работает целиком в вашем браузере
- Работает без интернета
- Без отправки файлов
- Без регистрации
- Без водяных знаков
Загружаем инструмент…
Как это работает
- Вставьте HTML вместе с блоком <style>.
- Нажмите «Inline the CSS» («Встроить CSS»).
- Скопируйте или скачайте результат и проверьте его в предпросмотре ниже.
Почему ничего не отправляется на сервер
Всё, что делает эта страница, выполняет код внутри вкладки вашего браузера — тем же движком, который рисует веб-страницы. Файл читается с диска в память вкладки, преобразуется там и записывается обратно как загружаемый файл. Он никуда не отправляется — ни нам, ни третьей стороне.
Проверьте сами
- Откройте инструменты разработчика в браузере (F12) и перейдите на вкладку «Сеть» (Network).
- Загрузите свой файл и запустите инструмент.
- Единственные запросы, которые вы увидите, — это код самого инструмента, а у нескольких тяжёлых инструментов ещё и их открытый движок из публичного CDN, плюс один небольшой сигнал о просмотре страницы на loreatec.jp (адрес и заголовок страницы, больше ничего). Ни один из них не несёт ваш файл.
Частые вопросы
Почему медиазапросы нельзя встроить?
Потому что у встроенного стиля нет условия — он применяется всегда. Медиазапрос — это условие, поэтому он может жить только в блоке <style>. Именно поэтому адаптивному письму нужны оба варианта: встроенные стили для базового дизайна и блок <style> для мобильной раскладки, с пониманием, что клиенты, вырезающие <style>, покажут только базовый дизайн.
Что происходит с :hover?
Та же проблема, тот же ответ: он остаётся в блоке <style>. Относитесь к эффектам наведения как к бонусу для тех клиентов, которые их поддерживают, но никогда не как к тому, от чего зависит само письмо.
Что побеждает — мой уже существующий встроенный стиль или таблица стилей?
Ваш. Всё, что уже стоит в атрибуте style, сохраняется и размещается после правил из таблицы стилей, поэтому продолжает их перекрывать — точно так же, как в браузере.
Это то же самое, что делает мой сервис рассылок?
У большинства из них — да, встраивание происходит при отправке. Этот инструмент нужен для случая, когда вы передаёте HTML кому-то ещё, отправляете через API или разбираетесь, почему какое-то правило не пережило отправку.