将外部 CSS 转换为内联 CSS 用于 Rails 中的邮件

Posted 2023-03-15

【中文标题】将外部 CSS 转换为内联 CSS 用于 Rails 中的邮件

【英文标题】：Converting External CSS to Inline CSS for Mail in Rails

【发布时间】：2011-09-01 02:24:40

【问题描述】：

我正在尝试创建一个应用程序，该应用程序将发送样式繁重的电子邮件，并且需要除 Google 的 Gmail 之外的其他客户端。我研究了这个问题，看起来 Gmail 从外部文件中删除了 CSS 或嵌套在“样式”标签中的 CSS。是否存在将样式从外部文件移动到内联的简单方法？

需要的东西：

<style>
.wide  width: 100px; 
.cell  display: block; 
</style>
<span class="wide cell">Sample</span>

并将其转换为：

<div class="wide cell" style="width: 100px; display: block;">Sample</div>

谢谢！

【问题讨论】：

没有可用的资源，但这里有一个链接：beaker.mailchimp.com/inline-css

@thirtydot 这正是我要找的！你知道他们是否提供 API？

我不知道。可能有一个类似的工具可以使用源代码。我会在谷歌上搜索“样式内联”，看看是否有任何可用的源代码。如果它是 Ruby，对你来说很好，否则你将不得不移植它。我不知道您希望多久使用一次内联功能（或者它有多“关键任务”），但可能值得考虑简单发送直接 POST 请求的快速简便方法 (like this)到这里：beaker.mailchimp.com/inline-css

【参考方案1】：

你的推理只有一个问题.....许多样式，甚至是内联，都不支持。

这是what is supported in email的参考

在您的示例中，您使用了 display: 标签，Outlook 07+ 不支持该标签

我的公司每天发送数千封电子邮件，而我经常参与构建它们。在实践中，内联样式是有效的，但它并不像内联所有内容那么简单，它会起作用。您必须非常小心使用什么以及如何使用它。我已经开始了，几乎所有的事情都在纯 html 中使用表格进行布局。这基本上是我发现的让事情几乎 100% 正常工作的唯一方法。

如果您将此功能构建到一个会得到大量使用的应用程序中，我还强烈建议您通过他们的 API 构建 Email on Acid。虽然您可以编写出质量非常好的输出代码，但微软无疑会找到一些方法让您的有效代码无法工作。 Acid 上的电子邮件将使用微软当时使用的任何疯狂来显示您的电子邮件是否有效。对于那些认真发送大量电子邮件的人来说，这是纯粹的天才和必需的用途。不，我不为公司工作....

【讨论】：

谢谢。将样式表修改为仅使用受支持的文件没有问题，但是我不想内联移动所有样式。

【参考方案2】：

添加premailer:

def premailer(message)
  message.text_part.body = Premailer.new(message.text_part.body.to_s, with_html_string: true).to_plain_text
  message.html_part.body = Premailer.new(message.html_part.body.to_s, with_html_string: true).to_inline_css

  return message
end

def welcome(user)
  @user = user

  message = mail ...
end

【参考方案3】：

您可以查看以下几个宝石：

premailer 或 premailer-rails 用于导轨 mail_style premailer plus（以上版本的fork） awesome_email roadie

我在写这个答案时没有赢家，但 premailer 似乎是最新的。

【讨论】：

谢谢，我已经使用了 premailer（见答案）。干杯！

现在还有 Roadie - mail_style 的一个分支。

如果你在 Rails 上，我推荐 Roadie。实施起来再简单不过了。

还有一个premailer-rails gem，我可以快速安装，没有问题。 （我不知道它与 Roadie 相比如何。）

感谢@JasonSwett 我已将其添加到列表中。