在电子邮件通知中解决最终样式

功能
, ,
1

至少 posteo.de 网页邮件客户端会使用 CSS 样式定义中的第一个值来渲染颜色，这会导致通知中的按钮无法阅读：

image

而不是

This image shows a rectangular blue bar with white text that appears to be instructions in German for how to reply to an email, with the German words "Rufe das Thema auf oder antworte auf diese E-Mail, um zu antworten." (Captioned by AI)

目前，相应的样式是：

font-weight: normal;; text-decoration: none; font-weight: bold; color: #006699;; background-color: #2F70AC; color: #FFFFFF; border-top: 4px solid #2F70AC; border-right: 6px solid #2F70AC; border-bottom: 4px solid #2F70AC; border-left: 6px solid #2F70AC; display: inline-block; font-weight: bold;

如果更改为仅包含最后一个定义：

font-weight: normal; text-decoration: none; font-weight: bold; background-color: #2F70AC; color: #FFFFFF; border-top: 4px solid #2F70AC; border-right: 6px solid #2F70AC; border-bottom: 4px solid #2F70AC; border-left: 6px solid #2F70AC; display: inline-block; font-weight: bold;

就能得到期望的行为。

由于发送稍后被覆盖的样式没有任何好处，通过仅发送最终的 CSS 定义可以解决有问题的邮件查看器渲染问题。

2 个赞
2

有一个实现位于

1 个赞
3

如果你想提交一个拉取请求，我很乐意合并它 :+1:

这并不能解决这个问题，但重复的样式是浪费且容易出错的。

我对 deduplicate_style 函数做了一些小的修改，主要是为了确保 key 和 values 都存在。

def deduplicate_style(style)
  styles = {}

  style
    .split(";")
    .select(&:present?)
    .map { _1.split(":", 2).map(&:strip) }
    .each { |k, v| styles[k] = v if k.present? && v.present? }

  styles.map { |k, v| "#{k}:#{v}" }.join(";")
end
4
2 个赞
5

好的，刚刚合并了 :git_merged:

1 个赞
6

此主题已在 2 天后自动关闭。不再允许回复。