CSS를 HTML을 인라인 스타일로 "컴파일"하십시오.

Question

전자 메일 HTML 템플릿을 작성 중이며 일부 전자 메일 클라이언트는 CSS 지정을 위해 <style>을 지원하지 않습니다. CSS를 적용하는 유일한 방법은 인라인 스타일 (style 속성)을 사용하는 것입니다. 일부 HTML에 스타일 시트를 적용하고 스타일이 적용된 HTML을 다시 가져 오는 도구 또는 라이브러리 (Node.JS)가 있습니까?

이 도구는 많은 선택기를 지원할 필요는 없습니다. ID, 클래스 및 요소 이름 선택자는 내 요구에 충분해야합니다. 필요한 사항의

예 :

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

// email.html 
<p>This is a <a href="http://example.com/">test</a></p> 

// Expected result 
<p>This is a <a href="http://example.com/" style="color: red;">test</a></p> 

Answer 1

는 구글 검색을했고이 발견. http://inlinestyler.torchboxapps.com/

Answer 2

당신은 $ ('A'를) 적용 jsdom + jquery을 사용할 수있는 CSS를 ({색상 : '레드 '});

Answer 3

또 다른 대안은 기본으로 돌아가는 것입니다. 당신이 링크 대신

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

의, 빨간 싶은 경우에 그 처리 할 수있는 끔찍한 블랙 베리 브라우저를 포함하여 거의 모든 브라우저

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

을한다.

Answer 4

내 생각에 juice이 (가) 찾고있는 것 같습니다.

단순히 그것을 필요로, 그것은 당신의 HTML과 CSS를 통과하고 당신이 원하는 것이 무거운를하자 :

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

그것은 Mootools의 '매끄러운 포함 성숙 라이브러리의 수를 구축하고 지원 광범위한 선택기.

node-email-templates 노드의 동적 전자 메일에 대한 멋진 래퍼입니다.

Answer 5

다음은 원하는 것을 그 살아 자바 스크립트 프로젝트입니다 :

• juice. 의존성이있는 1.7Mb.
• juice2. 의존성이있는 5.9MB. 이것은 주스의 포크, 주스보다 더 많은 옵션을 포함하는 것 같습니다. 주스처럼 미디어 쿼리를 삭제하지 않습니다. 알파벳순으로 인라인 CSS 규칙을 정렬합니다.
• styliner. 의존성이있는 4.0MB. 대신 약속을 사용합니다. juice2와는 다른 몇 가지 옵션이 있습니다. compact 옵션이 있는데 다른 옵션은 html을 축소하지 않습니다. 다른 사람들처럼 html 파일 자체를 읽지 않습니다. 또한 margin 및 padding 약식을 확장하십시오. 그리고 만약 당신이 어떻게 든 sugar을 사용하는 것처럼 네이티브 객체를 수정한다면 나는 이것을 this issue이 해결 될 때까지 사용하지 않을 것을 제안한다.

그럼 어떤 것을 사용하나요? 글쎄 그것은 당신이 CSS를 작성하는 방식에 달려있다. 그것들은 각기 다른 경우를 지원합니다. 각각을 잘 확인하고 완벽하게 이해할 수있는 몇 가지 검사를하십시오.