CSS-інлайнер онлайн

Можливості та обмеження

Цей CSS-інлайнер вирішує проблему, коли потрібно підготувати HTML для систем, які не підтримують зовнішні таблиці стилів або блоки style (наприклад, деякі поштові клієнти). Він перетворює прості CSS-правила на атрибути style, що робить стилі безпосередньо в елементах.

Як це працює

Браузер аналізує HTML у документ, об'єднує текст усіх елементів style та додатковий CSS, знаходить прості селектори за допомогою шаблону з фігурними дужками та застосовує відповідні оголошення до кожного елемента. Наприклад, для <style>p{color:red}</style><p>Hello</p> абзац отримає інлайновий стиль color:red. Якщо вибрано видалення style, усі елементи style видаляються, а результат серіалізується як повний документ із doctype.

Обмеження

Це спрощена конвертація, яка не реалізує повний CSS-каскад, специфічність, медіа-запити, keyframes, псевдоелементи, вкладені CSS, зовнішні таблиці стилів або обчислені стилі. Неправильні селектори пропускаються. Браузер може нормалізувати HTML під час аналізу. Інструмент не є санітайзером, не перевіряє сумісність і не гарантує, що візуальне відтворення залишиться незмінним. Перевіряйте результат у цільовому поштовому клієнті або браузері.

Конфіденційність

Конвертація виконується локально, без завантаження зовнішніх таблиць стилів або віддалених ресурсів.

Поширені запитання

Чи підтримуються медіа-запити?

Ні, медіа-запити не обробляються. Інструмент застосовує лише прості селектори без урахування умов медіа-запитів.

Що станеться з недійсними селекторами?

Недійсні селектори пропускаються, тобто вони не впливають на результат.

Чи можу я вставити HTML з елементами style у кількох місцях?

Так, інструмент збирає текст усіх елементів style у документі та об'єднує їх із додатковим CSS перед застосуванням.

Контрольний список

• Перевірте, чи вхідний HTML не перевищує 500 000 символів.
• За потреби додайте другий CSS-код.
• Виберіть опцію видалення style, якщо потрібно.
• Після конвертації скопіюйте результат.
• Перевірте результат у цільовому середовищі.