Risolvere gli stili finali nelle notifiche email

Funzionalità
, ,
1

Almeno il client di posta elettronica web di posteo.de renderizza i colori con il primo valore fornito in una definizione di stile CSS, il che produce pulsanti illeggibili nelle notifiche:

image

invece di

Questa immagine mostra una barra blu rettangolare con testo bianco che sembra essere istruzioni in tedesco su come rispondere a un'e-mail, con le parole tedesche "Rufe das Thema auf oder antworte auf diese E-Mail, um zu antworten." (Sottotitolato dall'IA)

Attualmente, lo stile corrispondente è 

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;

Se modificato per includere solo le definizioni più recenti 

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;


si ottiene il comportamento desiderato.

Poiché non vi è alcun vantaggio nell’inviare stili sovrascritti successivamente, i problemi di rendering con visualizzatori di posta elettronica difettosi potrebbero essere risolti inviando solo le definizioni CSS finali.

2 Mi Piace
2

C’è un’implementazione in

1 Mi Piace
3

Se ti va di fare una pull request, sarò felice di unirla :+1:

Non risolve questo problema, ma avere stili duplicati è uno spreco e soggetto a bug.

Apporterei alcune piccole modifiche alla funzione deduplicate_style, principalmente per assicurarmi che siano presenti sia la key che i 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 Mi Piace
5

Grazie, l’ho appena unito :git_merged:

1 Mi Piace
6

Questo argomento è stato chiuso automaticamente dopo 2 giorni. Non sono più consentite nuove risposte.