CSS-inliner
Зачем на самом деле нужен CSS-inliner
Письмо — не вкладка браузера. Gmail, Outlook, Яндекс.Почта, Mail.ru и большинство превью ESP сами решают, какой CSS они примут. `<link rel="stylesheet">` на ваш файл бренда часто игнорируется. Блок `<style>` в `<head>` в одних клиентах остаётся, в других пропадает. Наиболее предсказуемый вариант — простой HTML с оформлением в атрибутах `style` на нужных тегах. CSS-inliner как раз для этого: структура в HTML, правила в CSS — как на сайте; один проход копирует подходящие декларации на элементы. Файл для Mailchimp, Unisender или транзакционной цепочки остаётся HTML, но больше не зависит от подгрузки отдельной таблицы стилей. Страница заточена под финальный шаг: HTML и CSS в разных вкладках (или импорт .html + .css), «Сделать CSS инлайном», результат справа. Когда всё верно — копируйте, скачивайте или откройте «Предпросмотр HTML» на playground главной, чтобы пройтись по вёрстке перед тестовой отправкой.
Внешняя таблица стилей и встроенный CSS — не один источник
Многие онлайн-inliner'ы предполагают, что CSS уже внутри HTML — обычно `<style>` из дизайн-инструмента. Как только проект разделён по-нормальному — `template.html` плюс `styles.css` после сборки, выгрузка из Figma или статический генератор — остаётся склеивать вручную или запускать CLI раз в квартал. Наш CSS-inliner принимает оба варианта наравне: разметка во вкладке HTML, правила во вкладке CSS или импорт до двух файлов (`.html` и `.css`). CSS из вкладки применяется вместе с блоками `<style>` в HTML. На выходе — HTML с инлайн-атрибутами `style`; теги `<style>` убираются — так ждут большинство email-процессов. Это важно и для дайджестов, и для транзакционных писем: кнопки и типографика в общем .css, фрагменты HTML от разных авторов. Без чтения внешнего CSS вы застрянете, как только репозиторий выглядит как настоящий проект.
Обработка в браузере после загрузки — без аккаунта и очереди на сервер. `:hover`, `::before` и неразрешённые селекторы пропускаются и попадают в «Примечания». Простые `@media` разворачиваются для инлайна; адаптив в почтовике всё равно отличается от сайта — всегда шлите реальный тест в целевые клиенты. Чтобы проверить отступы или классы: «Предпросмотр HTML» отправляет инлайн-результат на playground главной — удобно до вставки в ESP.
Открыть CSS-inlinerВкладки HTML + CSS
Структура и оформление раздельно, как в репозитории. Когда готово — инлайните и получите версию для отправки.
Два файла за раз
Импорт .html и .css одним действием — меньше риска обрезанной вставки.
Превью на главной
Инлайн-HTML в новой вкладке playground перед копированием в ESP.
CSS-inliner для email с внешними таблицами стилей
Большинство инструментов переписывают только CSS, уже вшитый в HTML. Здесь — отдельный .css и теги <style> в разметке за один проход, затем копирование, скачивание или предпросмотр.
Внешний .css без ручного слияния заранее
Если `email.css` лежит рядом с `template.html`, импортируйте оба или вставьте во вкладки. Селекторы превращаются в атрибуты `style` — формат, который ждут почтовые клиенты. Не нужно вручную вшивать таблицу стилей в документ до обработки. Блоки `<style>` в HTML идут в том же проходе. Справа — полный инлайн-HTML только для чтения. Копирование с иконки в шапке вывода, скачивание `inlined.html`, «Предпросмотр HTML» для playground. Всё локально.
- Отдельная вкладка CSS — как в реальном проекте
- Внешний CSS и <style> за один проход
- Примечания по пропущенным правилам
- Локально в браузере, без загрузки
Как сделать CSS инлайном в HTML-шаблоне письма
Добавьте HTML и CSS
Шаблон во вкладку HTML. Кнопки, типографика, утилиты — во вкладку CSS или импорт .html + .css. `<style>` в head можно оставить — он тоже инлайнится.
Нажмите «Сделать CSS инлайном»
Подходящие правила станут атрибутами style. Смотрите «Примечания» для пропусков. Слева правите исходник, справа результат — при необходимости запустите снова.
Проверьте и отправляйте
Скопируйте, сохраните или предпросмотр на playground главной. Вставьте в ESP, протестируйте в Gmail и Outlook, сохраните утверждённый .html.
FAQ по CSS-inliner
Готовы инлайнить CSS перед следующей рассылкой?
Вставьте HTML, добавьте внешний или встроенный CSS, сделайте инлайн. Сверьте с тестовым ящиком — затем сохраните или скопируйте.
CSS-inliner
- Внешний .css и HTML за один проход
- Встроенные блоки <style> тоже
- Предпросмотр HTML на playground главной
- No signup; use the tool in the browser
После инлайна отправьте реальное тестовое письмо — почтовики удивляют сильнее любого превью.
Один HTML для ESP
Инлайн один раз, вставка в кампанию, архив утверждённой версии.