Resolve final styles in email notifications

Contribute Feature
, ,

AI-generated summary

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

Zumindest rendert der Posteo.de Web-E-Mail-Client Farben mit dem ersten Wert, der in einer CSS-Stildefinition angegeben wird, was zu unlesbaren Schaltflächen in Benachrichtigungen führt:

image

anstatt

Dieses Bild zeigt einen rechteckigen blauen Balken mit weißem Text, der Anweisungen auf Deutsch enthält, wie man auf eine E-Mail antwortet, mit den deutschen Wörtern „Rufe das Thema auf oder antworte auf diese E-Mail, um zu antworten.“ (Beschriftet von KI)

Derzeit ist der entsprechende Stil:

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;

Wenn nur die neuesten Definitionen einbezogen werden:

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;

erhält man das gewünschte Verhalten.

Da es keinen Vorteil bringt, später überschriebene Stile zu senden, könnten Darstellungsprobleme mit fehlerhaften E-Mail-Viewern behoben werden, indem nur die endgültigen CSS-Definitionen gesendet werden.

2 „Gefällt mir“
Replying in iPhone Mail in dark mode - input is white characters on white background
2

Es gibt eine Implementierung in

1 „Gefällt mir“
3

Wenn Sie Lust haben, einen Pull Request zu erstellen, werde ich ihn gerne zusammenführen :+1:

Er löst zwar nicht dieses Problem, aber doppelte Styling-Regeln sind verschwenderisch und fehleranfällig.

Ich würde einige kleine Anpassungen an der Funktion deduplicate_style vornehmen, hauptsächlich um sicherzustellen, dass sowohl der key als auch die values vorhanden sind.

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 „Gefällt mir“
5

Danke, gerade zusammengeführt :git_merged:

1 „Gefällt mir“
6

Dieses Thema wurde nach 2 Tagen automatisch geschlossen. Neue Antworten sind nicht mehr möglich.