Реклама мешает? Идти Без рекламы Сегодня 

CSS Email Inliner (вставка атрибута стиля)

РазработчикТекст

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

CSS Email Inliner (Style Attribute Inliner)

CSS Email Inliner (вставка атрибута стиля)

Преобразует HTML с блоком в формат, подходящий для электронных писем, перемещая все правила CSS в атрибуты style=\"\". Почтовые клиенты удаляют или игнорируют блоки , поэтому инлайн — единственный надежный способ сохранить дизайн во всех почтовых клиентах, включая Gmail, Outlook, Yahoo и Apple Mail.

Вставьте полный HTML слева; инструмент анализирует каждый селектор, точно решает специфичность так же, как браузеры, и записывает выигрышные правила на соответствующие элементы. Правила псевдоклассов, такие как :hover, и любые запросы @media сохраняются в оставшемся блоке , поскольку некоторые почтовые клиенты всё ещё требуют их там.

Как использовать

Вставьте HTML — полный документ или фрагмент с блоком — в поле ввода.
Определите, следует ли сохранять медиа-запросы и правила псевдоклассов (рекомендуется для респонсивных электронных писем).
Опционально удалите атрибуты class из результата после инлайна стилей.
Включите или отключите форматирование для более читаемого или компактного результата.
Скопируйте инлайн HTML или сохраните его в виде файла, затем вставьте прямо в ваш сервис электронной почты.

Возможности

Специфичность-ориентированное объединение – Решает идентификаторы, классы, атрибуты и типы элементов точно так же, как в браузерной цепочке.
Обработка !important – Внешние декларации !important правильно превосходят простые инлайн-стили, соответствуя спецификации CSS.
Сохранение медиа-запросов – Регулярные @media-правила сохраняются без изменений, чтобы мобильные точки переключения продолжали работать.
Псевдокласс-фальш-поддержка – Правила :hover, :focus и ::before не могут быть инлайн-выполнены; инструмент сохраняет их в сокращённом блоке .
Множественные блоки – Обрабатывает документы с несколькими метками стиля в <head> или <body>.
Опциональное удаление классов – Удаляются теперь избыточные атрибуты class=\"\" для более лёгкого пакета.
Форматирование вывода – Индентированный, читаемый HTML или компактный однострочный вывод.
100% клиентская сторона – Ваш HTML никогда не покидает браузер. Нет загрузки, нет обработки на сервере.

Реклама · УДАЛИТЬ?

 Часто задаваемые вопросы

Почему HTML-письма требуют инлайна CSS вместо использования блока style?

Многие почтовые клиенты — особенно старые версии Outlook и несколько веб-почтовых сервисов — либо полностью удаляют элемент head, либо изолируют сообщение, игнорируя внешние и встроенные стили. Инлайн-атрибуты style на каждом элементе — единственный формат деклараций, который уважают все основные почтовые клиенты, поэтому шаг инлайна является обязательным для дизайнов, которые должны выглядеть одинаково в Gmail, Outlook, Yahoo и Apple Mail.
Что такое специфичность CSS и почему порядок каскада важен для инлайна?

Специфичность — это вес, который CSS присваивает селектору на основе его идентификаторов, классов, атрибутов, псевдоклассов и типов элементов. Когда два правила применяются к одному свойству на одном элементе, браузер сохраняет значение из правила с более высокой специфичностью; при равенстве разрешение производится по порядку источников, где позже появившееся правило выигрывает. Инлайнер должен пересчитывать этот алгоритм посекаторно, иначе низкоспецифичное правило может перезаписать высокоспецифичное, и дизайн будет изменяться без видимых изменений.
Как взаимодействует флаг !important с инлайн-стайлами?

В стандартном каскаде инлайн-стили находятся на более высоком уровне источника, чем авторские стили, поэтому они обычно превосходят любые правила на уровне класса или элемента. Флаг !important — это единственный исключение: декларация !important из авторского стиля превосходит несуществующий инлайн-стиль. Именно поэтому кнопка, окрашенная белым цветом с флагом !important в классе, будет отображаться белой, даже если элемент имеет style=\"color: blue\".
Почему правила псевдоклассов, такие как :hover, или псевдоподэлементы, такие как ::before, не могут быть инлайн-выполнены?

Атрибут style содержит декларации, которые применяются к элементу независимо от его состояния. Правила псевдоклассов описывают состояние — hover, focus, checked — и псевдоподэлементы описывают генерируемый контент, который не имеет реального узла DOM. Ни одно из этих понятий не имеет соответствующего инлайн-формата, поэтому любой инлайнер должен оставить эти правила в оставшемся блоке стилей для небольшого числа почтовых клиентов, поддерживающих их.
Что происходит с запросами @media в процессе инлайна?

Медиа-запросы — это условные правила, которые применяются только при выполнении ограничений на экране. Поскольку атрибут style не может выразить условное применение, медиа-запросы должны сохраняться без изменений в блоке style. Респонсивные дизайны электронных писем полагаются на запросы min-width и max-width для переключения макетов на мобильных устройствах, поэтому удаление их полностью уничтожит респонсивное поведение.