メール通知の最終スタイルを確定

特徴
, ,
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:

これはこの問題を解決するものではありませんが、重複したスタイルは無駄であり、バグが発生しやすいため、 anyway.

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日後に自動的に閉じられました。返信はもう受け付けられません。