이메일 알림의 최종 스타일 해결

[thoka (Thomas Kalka)]

최소한 posteo.de 웹 메일 클라이언트는 CSS 스타일 정의에서 첫 번째로 주어진 값을 기준으로 색상을 렌더링합니다. 이로 인해 알림에서 버튼이 읽기 어려워집니다:

아래와 같이 보이는 것이 아니라 말입니다.

현재 해당 스타일은 다음과 같습니다.

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 정의만 전송하면 버그가 있는 메일 뷰어에서의 렌더링 문제를 해결할 수 있습니다.

[thoka (Thomas Kalka)]

구현이 여기 있습니다.

feature: Resolve final styles in email notifications

[zogstrip]

풀 리퀘스트를 보내고 싶으시다면 기꺼이 머지해 드리겠습니다

이 문제를 해결하지는 않지만, 중복된 스타일링은 낭비적일 뿐만 아니라 버그 발생 가능성이 높기 때문에 정리하는 것이 좋습니다.

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

[thoka (Thomas Kalka)]

FIX: deduplicate css in mails (#30003)

[zogstrip]

감사합니다, 방금 병합했습니다