Большинство email-клиентов удаляют теги style и внешние таблицы стилей из HTML-email, нарушая ваши тщательно спроектированные макеты. Решение состоит во встраивании всего CSS, конвертируя правила таблиц стилей в атрибуты style на каждом HTML-элементе. Этот инструмент берёт ваш HTML со встроенным или внутренним CSS и производит email-ready HTML со всеми стилями inline.
Supported Selectors
h1, p, div.classname#idnamep.classname, div#idh1, h2, h3.class1.class2Limitations
:hover, ::before) are skippedВставьте ваш HTML со встроенными или связанными CSS-стилями в поле ввода. Нажмите 'Inline CSS', и инструмент конвертирует все CSS-правила в inline-атрибуты style на каждом HTML-элементе. Вывод представляет собой email-client-ready HTML, который корректно рендерится в Gmail, Outlook, Yahoo Mail и Apple Mail. Обратите внимание, что media queries не поддерживаются и будут удалены во время встраивания.
CSS inlining необходим для разработки HTML-email, так как большинство email-клиентов удаляют теги style и внешние таблицы стилей. Используется при создании маркетинговых email-кампаний, транзакционных email-шаблонов (подтверждения заказов, сбросы паролей), дизайнов рассылок, автоматизированных уведомлений и любого HTML-контента, отправляемого через email-провайдеров вроде SendGrid, Mailchimp, Amazon SES или Postmark.
Inliner парсит HTML с использованием DOMParser, извлекает все элементы style, парсит CSS-правила в пары селектор-свойство, сопоставляет селекторы с DOM-элементами с использованием querySelectorAll() и применяет свойства как inline-атрибуты style. Правила специфичности CSS соблюдаются, и более специфичные селекторы переопределяют менее специфичные. Сокращённые свойства (margin, padding, font) сохраняются. Media queries и псевдо-селекторы (:hover, :focus) не поддерживаются и удаляются во время встраивания.
Большинство email-клиентов (Gmail, Outlook, Yahoo Mail) удаляют теги <style> и игнорируют внешние таблицы стилей. Только inline-стили (style="...") надёжно поддерживаются во всех email-клиентах. Встраивание CSS гарантирует, что ваш email рендерится корректно везде.
Современные версии Apple Mail, iOS Mail и некоторые конфигурации Gmail поддерживают теги <style>. Однако Outlook (desktop и web), старые Gmail и Yahoo Mail удаляют их. Для максимальной совместимости всегда встраивайте ваш CSS.
Media queries не могут быть встроены и не поддерживаются этим инструментом. Они удаляются во время процесса встраивания. Для адаптивных email-макетов рассмотрите использование табличных макетов или отдельных условных комментариев для разных email-клиентов.
Симулируйте, как выглядят цвета для людей с различными типами нарушения цветового зрения.
Генерируйте гармоничные цветовые палитры с использованием алгоритмов теории цвета.
Проверьте, соответствуют ли цветовые комбинации требованиям WCAG 2.1 по контрастности для доступности.
Трансформируйте, форматируйте, генерируйте и кодируйте данные мгновенно. Приватно, быстро и всегда бесплатно.
Смотреть все инструменты