"Biên dịch" CSS thành HTML dưới dạng kiểu nội tuyến

Question

Tôi đang viết mẫu HTML e-mail và một số ứng dụng khách email không hỗ trợ <style> để chỉ định CSS. Cách thay thế duy nhất để áp dụng CSS là sử dụng kiểu nội tuyến (thuộc tính style). Có một công cụ hoặc thư viện (Node.JS) để áp dụng một biểu định kiểu cho một số HTML và lấy lại HTML với các kiểu được áp dụng không?

Công cụ không phải hỗ trợ nhiều bộ chọn; bộ chọn tên id, lớp và phần tử phải đủ cho nhu cầu của tôi.

Ví dụ về những gì cần thiết:

// 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

Đã làm một tìm kiếm google và thấy câu này:. http://inlinestyler.torchboxapps.com/

Answer 2

Bạn có thể sử dụng jsdom + jquery để áp dụng $ ('a') css ({color: 'đỏ '});

Answer 3

Một giải pháp thay thế khác là quay lại vấn đề cơ bản. Nếu bạn muốn có một liên kết để có màu đỏ, thay vì

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

làm

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

Hầu như bất kỳ trình duyệt, bao gồm trình duyệt BlackBerry khủng khiếp có thể xử lý đó.

Answer 4

Tôi nghĩ rằng juice là thứ bạn đang tìm kiếm.

Đơn giản chỉ cần yêu cầu nó, sau đó vượt qua nó html và css của bạn và để cho nó làm việc nặng nhọc cho bạn như thế này:

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

Nó được xây dựng trên một số thư viện trưởng thành bao gồm mootools' slick, và hỗ trợ một phạm vi rộng của bộ chọn.

Bạn cũng có thể quan tâm node-email-templates, đây là trình bao bọc đẹp cho email động trong nút.

Answer 5

Dưới đây là các dự án javascript sống mà những gì bạn muốn:

• juice. 1.7Mb với phụ thuộc.
• juice2. 5.9Mb với phụ thuộc. Đây là một ngã ba của nước trái cây, dường như có nhiều lựa chọn hơn nước trái cây. Điều này không bỏ các truy vấn phương tiện truyền thông như nước trái cây. Sắp xếp các quy tắc css nội tuyến theo thứ tự abc.
• styliner. 4.0Mb với phụ thuộc. Cái này sử dụng lời hứa thay thế. Có một vài lựa chọn khác với juice2. Có tùy chọn compact mà các tùy chọn khác không có để giảm thiểu html. Không đọc các tập tin html chính nó như những người khác làm. Đồng thời mở rộng margin và padding viết tắt. Và trong trường hợp bạn bằng cách nào đó sửa đổi các đối tượng bản địa của bạn (như nếu bạn đang sử dụng sugar), tôi không đề nghị sử dụng nó cho đến khi this issue được giải quyết.

Vậy nên sử dụng cái nào? Vâng nó phụ thuộc vào cách bạn viết CSS. Họ từng có sự hỗ trợ khác nhau cho các trường hợp cạnh. Kiểm tra tốt hơn và làm một số xét nghiệm để hiểu một cách hoàn hảo.