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

功能
, ,
1

At least posteo.de web email client renders colors with the first value given in a CSS style definition, which yields unreadable buttons in notifications:

image

instead of

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)

Currently, the according style is 

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;

If changed to include only the latest definitions 

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;

one gets the desired behavior.

Since there is no benefit by sending later overwritten styles, rendering problems with buggy email viewers could be resolved by sending only the final CSS definitions.

2 个赞
2

There is an implementation in

1 个赞
3

If you feel like making a pull request, I’d happily merge it :+1:

It doesn’t solve this issue but having duplicate styling is wasteful and bug-prone anyways.

I would make some slight tweaks to the deduplicate_style function, mostly to make sure both the key and the values are present.

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

Thanks, just merged it :git_merged:

1 个赞
6

This topic was automatically closed after 2 days. New replies are no longer allowed.