Встроитель CSS для Email
Встройте правила блока CSS <style> в атрибут style каждого совпадающего тега HTML для HTML-писем, где большинство клиентов удаляют теги <style>. Поддерживает простые селекторы тегов, классов, ID и тег+класс — без комбинаторов потомков, псевдоклассов или каскада специфичности.
Ввод
When off, rules this tool can't inline are dropped instead of preserved.
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-email-inliner \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"htmlInput": "<style>p { color: red; }</style><p>Hello</p>",
"keepUnsupportedRules": "true",
"removeClassAttrs": ""
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-email-inliner` tool (CSS Email Inliner) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-email-inliner/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Встроитель CSS для Email — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что делает этот инструмент
Большинство почтовых клиентов — Gmail, Outlook и многие другие — удаляют блоки <style> и содержимое <head> при отображении HTML-письма или игнорируют их непредсказуемо. Единственный CSS, который гарантированно сохранится, — это CSS, написанный непосредственно на каждом элементе как атрибут style="...". "Встраивание CSS" — это процесс взятия правил, написанных в обычном блоке <style>, и копирования их объявлений на каждый элемент, который они соответствуют, так что письмо отображается корректно везде без полагаясь на поддержку таблицы стилей.
Этот инструмент делает именно это: вставьте HTML, содержащий блок <style>, и он переписывает каждый совпадающий тег с встроенным атрибутом style, несущим разрешённые объявления, затем удаляет (или опционально сохраняет) исходный блок <style>.
Честный масштаб: только простые селекторы
Полный механизм селектора CSS — селекторы потомков (div p), селекторы потомков/соседей (div > p, p + span), псевдоклассы и псевдоэлементы (a:hover, p::first-line), селекторы атрибутов ([href]), и разрешение каскада на основе специфичности — это подлинно сложная проблема разбора без реального DOM браузера для запроса. Этот инструмент работает изоморфно (браузер, сервер и API) без доступного парсера DOM, поэтому преднамеренно не пытается ничего из этого.
Что он поддерживает, согласованно с сканированием на основе шаблонов необработанного исходного кода HTML:
- Селекторы тегов —
p,td,h1 - Селекторы классов —
.button - Селекторы ID —
#header - Селекторы тег + класс —
p.intro
Всё остальное в вашей таблице стилей — селектор потомка, псевдокласс, селектор атрибута, список с запятыми, смешивающий поддерживаемые и неподдерживаемые формы — классифицируется как "неподдерживаемое" и, по умолчанию, сохраняется в блоке <style> в верхней части результата вместо того, чтобы быть молча удалённым или не совпадающим. Отключите это, если вы предпочитаете, чтобы результат вообще не имел блока <style>.
Также нет каскада специфичности: когда два или более поддерживаемых правила совпадают с одним элементом, то, которое появляется позже в вашей таблице стилей, побеждает для любого свойства, которое они оба устанавливают — независимо от того, является ли это селектором тега, класса или ID. Реальный браузер взвешивал бы селекторы ID выше селекторов класса выше селекторов тега; этот инструмент не делает. Предварительно существующий атрибут style="..." элемента всегда сохраняется и всегда побеждает всё, что извлекается из таблицы стилей.
Если ваш шаблон письма полагается на селекторы потомков, псевдоклассы или разрешение точной специфичности, используйте встроитель на основе инструмента сборки — juice или Premailer оба реализуют полный механизм селектора и являются правильным выбором для сложных таблиц стилей.
Как его использовать
- Вставьте HTML, содержащий блок
<style>, в поле ввода. - Оставьте "Сохранить неподдерживаемые правила" отмеченным, чтобы сохранить медиа-запросы, правила псевдокласса и другие селекторы, которые этот инструмент не может встроить, в блоке
<style>в верхней части результата (большинство почтовых клиентов, которые вообще поддерживают медиа-запросы, всё ещё будут читать блок<style>, помещённый туда). Снимите флажок, чтобы удалить их полностью. - Отметьте "Удалить атрибуты класса", если вы хотите, чтобы
class="..."были удалены из результата после того, как его стили встроены — полезно, поскольку некоторые почтовые ящики помечают письма, которые всё ещё ссылаются на внешние имена классов. - Скопируйте или загрузите результирующий HTML из панели результатов.
Результат автоматически обновляется при редактировании входных данных.
FAQ
Будет ли это правильно обрабатывать весь мой шаблон письма?
Это правильно обрабатывает типичный случай — правила тега, класса, ID и тег+класса. Если ваша таблица стилей использует селекторы потомков, псевдоклассы или зависит от специфичности CSS для разрешения конфликтов между правилами, этот инструмент оставит эти правила в блоке <style> вместо того, чтобы угадывать, поэтому проверьте результат перед отправкой. Смотрите раздел масштаба выше.
Что происходит с запросами @media?
Они не могут быть встроены (медиа-запросы не привязаны к одному элементу), поэтому они остаются в блоке <style> в результате, когда отмечено "Сохранить неподдерживаемые правила". Некоторые почтовые клиенты (особенно Apple Mail и более новые версии Outlook/Gmail) действительно читают блок <style> для медиа-запросов даже после удаления другого стилирования — вот именно почему этот инструмент сохраняет их там вместо того, чтобы их удалять.
Мой элемент уже имел атрибут style="..." — что с ним происходит?
Он сохраняется и всегда имеет приоритет над всем, что встроено из таблицы стилей, соответствуя тому, как реальный браузер приоритизирует встроенные стили над правилами таблицы стилей.
Он проверяет или исправляет неправильный HTML? Нет — это трансформация "best-effort", а не валидатор HTML. На плохо сформированных входных данных он возвращается к возврату вашего HTML без изменений вместо создания искажённого результата или ошибки.
Приватность
Этот инструмент работает полностью в вашем браузере. Ваш HTML — включая любые встроенные ссылки, пиксели отслеживания или персонализированное содержимое — никогда не загружается на сервер.