Công cụ nào để tự động tạo kiểu CSS để tạo mã HTML email?

Question

Khi bạn xem qua http://www.campaignmonitor.com/css/ bạn biết rằng bạn cần nhúng kiểu nội tuyến vào HTML của mình, để email của bạn được đọc trong bất kỳ ứng dụng thư nào.

Bạn có biết bất kỳ công cụ hoặc tập lệnh nào để tự động chuyển đổi tệp HTML có khai báo thành tệp HTML chỉ với thuộc tính kiểu CCS nội tuyến không?

Chỉnh sửa: Bất kỳ giải pháp Javascript nào (ví dụ: http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/)? Với jQuery?

Answer 1

Kiểm tra bộ chuyển đổi trực tuyến premailer.dialect.ca hoặc Python script để thực hiện việc này.

Answer 2

Nó không đủ để chỉ đơn giản là inline CSS của bạn. Không có tiêu chuẩn quan sát nào về cách một email HTML sẽ được hiển thị trong bất kỳ ứng dụng email khách nào được sử dụng. Tất cả đều làm điều đó một cách khác nhau, và bạn càng thiết kế email của bạn thì càng có nhiều khả năng nó sẽ phá vỡ số lượng khách hàng lớn hơn. Nhiều chuyên gia trong không gian này chỉ đơn giản là sử dụng hình ảnh và bảng và có thể một số màu nền, nhưng không có gì khác. Luôn bao gồm liên kết tới trang web có bản sao làm việc của email và luôn cung cấp một biến thể văn bản thuần túy.

Answer 3

Một số khác từ MailChimp - http://beaker.mailchimp.com/inline-css

Answer 4

Bạn có thể muốn có một cái nhìn tại PostageApp.

Một trong những tính năng thực sự mạnh mẽ của nó là nó có một hệ thống templating rất mạnh mẽ có thể tự động nội tuyến HTML và CSS mà không có bất kỳ vấn đề.

(Khai báo đầy đủ: Tôi là Giám đốc sản phẩm PostageApp.)

Answer 5

Nếu bạn muốn có một giải pháp PHP, bạn có thể thử CssToInlineStyles.

Answer 6

Hai C# phiên bản:

http://chrispebble.com/Blog/7/inlining-a-css-stylesheet-with-c

PreMailer.Net - https://github.com/milkshakesoftware/PreMailer.Net

đã không được kiểm tra hoặc như được nêu ra nhưng sẽ đăng lại nếu/khi tôi làm.

Answer 7

Điều này có thể hơi muộn, nhưng nếu bạn muốn làm cho HTML của bạn trở thành tốt nhất có thể cho tiếp thị e-mail (bằng cách giới thiệu css của bạn và sử dụng một số công cụ tuyệt vời khác), hãy sử dụng Premailer. Hoàn toàn miễn phí, và tất nhiên, được hợp tác với chính CampaignMonitor.

Hy vọng điều đó sẽ hữu ích.

Answer 8

Đối với lập trình viên PHP: hãy kiểm tra điều này online converter hoặc điều này PHP script để làm điều đó.

Answer 9

Tôi đã viết thư viện Node.js có tên là Styliner để inline CSS ở phía máy chủ Javascript.

Nó hỗ trợ stylesheets LESS cũng (và hỗ trợ bổ sung cho các định dạng khác)

Answer 10

Một giải pháp javascript bởi tikku đây: https://tikku.com/open-source/utilities/css-inline-transformer/

Answer 11

Tôi là một chút muộn để các trò chơi nhưng hy vọng điều này sẽ giúp một ai đó .

Tôi thấy điều này tốt đẹp chút jQuery/javascript phương pháp có thể được nhúng vào một trang - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/

tôi đã chỉnh sửa nó một chút để hỗ trợ trình duyệt IE và cũng để hỗ trợ một trang với nhiều file CSS gắn liền áp dụng phong cách trong đúng thứ tự.

$(document).ready(function ($) { 
      var rules; 
      for(var i = document.styleSheets.length - 1; i >= 0; i--){ 
       if(document.styleSheets[i].cssRules) 
        rules = document.styleSheets[i].cssRules; 
       else if(document.styleSheets[i].rules) 
        rules = document.styleSheets[i].rules; 
       for (var idx = 0, len = rules.length; idx < len; idx++) { 
        if(rules[idx].selectorText.indexOf("hover") == -1) { 
         $(rules[idx].selectorText).each(function (i, elem) { 
          elem.style.cssText = rules[idx].style.cssText + elem.style.cssText; 
         }); 
        } 
       } 
      } 
      $('style').remove(); 
      $('script').remove(); 
      $('link').remove(); 
     }); 

Sau đó, trang có thể được sao chép/dán vào nội dung email.

Answer 12

Dưới đây là danh sách trang web sẵn sàng sử dụng các công cụ nội tuyến, một số đã được đề cập trước đó. Nếu có bất kỳ điều gì tôi đã bỏ lỡ, vui lòng chỉnh sửa và thêm chúng. Tôi không thể hứa mỗi công trình như đã quảng cáo, vì vậy thả ý kiến, nhưng không bắn sứ giả ...

• Campaign Monitor
• Mailchimp
• Premailer
• Inline Styler
• Emogrifier
• MailerMailer
• Tikku
• Mally

Và đây là một trong những hoạt ngược lại (un-nội tuyến css của bạn)

• CSS Out