Перейти до вмісту

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 працює повністю у вашому браузері — ваш шаблон листа ніколи не залишає ваш пристрій.