Подтвердить что ты не робот

"Скомпилировать" CSS в HTML как встроенные стили

Я пишу HTML-шаблон электронной почты, а некоторые почтовые клиенты не поддерживают <style> для указания CSS. Единственной альтернативой применению CSS является использование встроенных стилей (атрибут style). Есть ли инструмент или библиотека (Node.JS) для применения таблицы стилей к некоторому HTML и возврата HTML со стилями?

Инструмент не должен поддерживать множество селекторов; id, class и селектора имен элементов должны быть достаточными для моих нужд.

Пример того, что необходимо:

// stylesheet.css
a { color: red; }

// email.html
<p>This is a <a href="#" onclick="location.href='http://example.com/'; return false;">test</a></p>

// Expected result
<p>This is a <a href="#" onclick="location.href='http://example.com/'; return false;" style="color: red;">test</a></p>
4b9b3361

ОТВЕТЫ

Ответ 1

Я думаю, juice - это то, что вы ищете.

Просто попросите его, затем передайте его html и css и позвольте ему сделать тяжелый подъем для вас следующим образом:

var juice = require('juice');
var inlinedcss = juice('<p>Test</p>', 'p { color: red; }');

Он основывается на ряде зрелых библиотек, включая пятно mootools, и поддерживает широкий диапазон селекторов.

Вы также можете быть заинтересованы в node-email-templates, который является красивой оболочкой для динамических писем в node.

Ответ 2

Здесь живые проекты javascript, которые делают то, что вы хотите:

  • juice. 1.7Mb с зависимостями.
  • juice2. 5.9Mb с зависимостями. Это вилка сока, похоже, содержит больше вариантов, чем сок. Этот софт не выдает медиа-запросы, как это делает сок. Сортирует встроенные правила CSS в алфавитном порядке.
  • styliner. 4.0Mb с зависимостями. Вместо этого используется promises. Есть несколько вариантов, кроме сока2. Имеет параметр compact, который у других нет, что минимизирует html. Не читает сам файл html, как это делают другие. Также расширяет сокращения margin и padding. И если вы каким-то образом измените свои собственные объекты (например, если вы используете sugar), я не предлагаю использовать это до эта проблема разрешена.

Так какой из них использовать? Ну, это зависит от того, как вы пишете CSS. Каждый из них имеет разную поддержку для краевых случаев. Лучше проверяйте каждого и делайте некоторые тесты, чтобы понять их.

Ответ 4

Вы можете использовать jsdom + jquery для применения $('a'). css ({color: 'red'});

Ответ 5

Еще одна альтернатива - вернуться к основам. Если вы хотите, чтобы ссылка была красной, вместо

<a href="" style="color: red">my link</a>

делать

<a href=""><font color="red">my link</font></a>

Почти любой браузер, включая страшный браузер BlackBerry, может справиться с этим.