Перейти к содержанию

CSS встраиватель для писем

Преобразует CSS из блока <style> во встроенные атрибуты style для совместимости с почтовыми клиентами.

Входные данные
Выходные данные

CSS встраиватель для писем

Большинство почтовых клиентов удаляют или игнорируют CSS, написанный в блоке <style> — веб-приложение Gmail — самый известный пример. Решение заключается в том, чтобы перенести каждое правило в элемент, который оно определяет, как атрибут style="", и именно это делает этот инструмент: вставьте HTML с блоком <style> и получите тот же разметку со встроенными стилями, готовую вставить в кампанию или шаблон транзакций.

Объединение соблюдает специфичность CSS по умолчанию, поэтому правило типа #footer перевешивает простой a даже если это правило появляется позже в таблице стилей — отключите «Учитывать специфичность селектора», чтобы объединять по порядку появления. Правила, которые не могут быть встроены — media queries, :hover и другие at-rules — никогда не отбрасываются молча: «Сохранить правила, которые нельзя встроить» оставляет их в сокращённом блоке <style>, а «Удалить исходный блок <style>» решает, будет ли этот блок выведен вообще. «Добавить атрибуты width/bgcolor для старых клиентов» отражает ширину, высоту и цвет фона на обычные атрибуты, которые ожидают старые сборки Outlook, «Удалить неиспользуемые классы и ID» убирает селекторы, на которые никто не ссылается, а «Минифицировать вывод» сжимает оставшиеся пробелы.

Поддержка селекторов охватывает типы, классы, ID и селекторы атрибутов, плюс дочерние комбинаторы — паттерны, которые используются в реальных таблицах стилей писем. Существующий атрибут style="" элемента всегда имеет приоритет над всем, что было объединено в, что соответствует тому, как браузеры применяют каскад. С включённым параметром «Показывать предупреждения о неподдерживаемых свойствах» свойства, которые многие клиенты игнорируют — float, position: fixed, трансформации, box-shadow — помечаются в комментарии в начале вывода, чтобы вы их заметили перед отправкой теста. Всё работает локально в вашем браузере: HTML, который вы вставляете, никогда не загружается никуда. Скопируйте результат, загрузите его как .txt файл или отправьте прямо в другой инструмент, чтобы продолжить его очистку.

FAQ

Зачем вообще встраивать CSS для писем?
Многие почтовые клиенты — в особенности веб-интерфейс Gmail — удаляют блоки <style> из <head> или полностью их игнорируют, но они действительно учитывают атрибут style="" на самом элементе. Встраивание — это обходной путь, на который полагается вся индустрия HTML-писем.
Что происходит с медиа-запросами и правилами :hover?
Они не могут быть встроены в один элемент, поэтому по умолчанию они сохраняются в сокращённом блоке <style> для клиентов, которые его читают — отключите «Сохранить правила, которые нельзя встроить», чтобы их удалить.
Правильно ли это обрабатывает специфичность селектора?
Да. ID селектор переопределяет селектор класса, который переопределяет селектор типа, независимо от порядка появления правил — это те же правила, которые использует браузер. Отключите «Учитывать специфичность селектора», чтобы объединять только по порядку появления.
Для чего нужны атрибуты width/bgcolor?
Некоторые старые версии Outlook отображают таблицы с помощью движка Word и игнорируют встроенный CSS для фонов и размеров. «Добавить атрибуты width/bgcolor для старых клиентов» копирует эти значения на обычные HTML атрибуты, которые эти клиенты действительно поддерживают.
Загружается ли мой HTML куда-нибудь?
Нет. Встраивание CSS работает полностью в вашем браузере — ваш шаблон писем никогда не покидает ваше устройство.