פתור סגנונות סופיים בהודעות דואר אלקטרוני

Contribute תכונה
, ,

סיכום מבוסס בינה מלאכותית

The discussion Resolve final styles in email notifications revolves around improving the rendering of email notifications. thoka identified an issue where some email clients, like posteo.de, render buttons with unreadable colors due to duplicate CSS style definitions. To fix this, thoka proposed removing later overwritten styles, which would resolve rendering problems with buggy email viewers. zogstrip suggested creating a pull request to implement this change, and thoka subsequently created a pull request. zogstrip merged the pull request, which includes a deduplicate_style function to remove duplicate styles, making the code more efficient and less prone to bugs. The fix, however, does not address this issue.

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 לייקים
Replying in iPhone Mail in dark mode - input is white characters on white background
2

There is an implementation in

https://github.com/thoka/discourse/commit/1b376184a6477c21b41e7acd6121c5775705ddde

לייק 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

https://github.com/discourse/discourse/pull/30003

2 לייקים
5

Thanks, just merged it :git_merged:

לייק 1
6

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