e-mail HTML Styling per Gmail

sto generando una e-mail HTML che utilizza un foglio di stile interno, vale a diree-mail HTML Styling per Gmail

<!doctype html> 
<html> 
<head> 
    <style type="text/css"> 
    h2.foo {color: red}  
    </style> 
</head> 
<body> 
<h2 class="foo">Email content here</foo> 
</body> 
</html>

Se visto in Gmail sembra tutti gli stili del foglio di stile interno vengono ignorati. Sembra che Gmail ignori tutti gli stili tranne le regole in linea, ad es.

<h2 style="color: red">Email content here</foo>

È questo la mia unica opzione per lo styling email HTML se visto con Gmail?

fonte

2012-01-29 Dónal

+14

Sì, questo è l'unico poiché molti client di posta elettronica basati sul Web non riconoscono i fogli di stile interni. In realtà lo stile in linea è il modo consigliato per progettare newsletter html. – Mike

Per quanto ne so, i lettori di e-mail possono supportare html 3.2 e css 1.1. – bdares

Come hai generato la tua email? Voglio dire, aggiungi il codice per creare l'intento? – RaphMclee

Utilizzare gli stili in linea per tutto. Questo sito convertirà le tue classi in stili in linea: http://premailer.dialect.ca/

fonte

2012-02-03 21:43:39 substate

Questo sito è fantastico. Mostra gli avvertimenti e ti dà un output di testo normale oltre a modificare il tuo codice HTML. – jamesbar2

Impressionante, è molto utile. Grazie –

Questo Premailer è in Ruby, fonte: https://github.com/premailer/premailer. Ce n'è un altro in Python: https://premailer.io/ source: https://github.com/peterbe/premailer, entrambi sono open source. –

Gmail ha avviato il supporto di base per i tag di stile nell'area di testa. Trovato nulla di ufficiale ancora, ma puoi facilmente provarlo da solo.
Sembra ignorare i selettori di classe e id, ma i selettori di elementi di base funzionano.

<!doctype html> 
<html> 
    <head> 
    <style type="text/css"> 
     p{font-family:Tahoma,sans-serif;font-size:12px;margin:0} 
    </style> 
    </head> 
    <body> 
    <p>Email content here</p> 
    </body> 
</html>

si creerà un tag di stile nella propria area testa limitata al div che contiene il corpo del messaggio

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>

fonte

2014-05-22 12:43:46 fuchs777

Ancora non supporta le query multimediali, il che è un peccato. Anche le classi e gli ID sono utili :) – Eoin

Ora eseguono anche le query multimediali e il supporto completo per lo stile CSS. http://stackoverflow.com/questions/39759764/unexpected-value-fileuploadmodule-imported-by-the-module-uploadermodule-ng – crowmagnumb

Come altri hanno detto, alcuni programmi di posta elettronica non leggeranno gli stili CSS. Se hai già un e-mail web scritto in su è possibile utilizzare il seguente strumento da ZURB inline tutti gli stili:

http://zurb.com/ink/inliner.php

Ciò viene in estremamente utile quando si utilizza i modelli, come quelli di cui sopra da MailChimp, monitor di campagna , ecc. come loro, come tu hai trovato, non funzionerà in alcuni programmi di posta elettronica. Questo strumento lascia la tua sezione di stile per i programmi di posta che lo leggeranno e mette tutti gli stili in linea per ottenere una leggibilità più universale nel formato che volevi.

fonte

2015-03-22 22:59:55

Nota che i servizi e gli strumenti per l'invio di e-mail potrebbero essere in grado di allineare il tuo CSS per te, consentendo ai CSS di utilizzare i tag <style> in Gmail.

Ad esempio, se invii email con MailChimp, il tuo CSS dai tag <style> verrà automaticamente inserito automaticamente per impostazione predefinita. Con Mandrillo, è possibile attivare questa funzionalità (anche se è disabilitato per default for performance reasons) controllando i "stili inline CSS in email HTML" scatola nella sezione "Invio Defaults" della scheda Impostazioni:

Image showing how to do this in Mandrill

fonte

2015-05-30 11:27:27

Il le risposte qui non sono aggiornate, a partire da oggi, 30 settembre 2016. Gmail è attualmente rolling out support per il tag style nello head, così come le query multimediali. Se Gmail è la tua unica preoccupazione, sei sicuro di usare classi come uno sviluppatore moderno!

Per riferimento, è possibile controllare lo official gmail CSS docs.

Come nota a margine, Gmail era l'unico cliente principale che non supportava style (reference, finché non si aggiornano comunque). Ciò significa che puoi quasi interrompere in modo sicuro l'inserimento di stili in linea. Alcuni dei clienti più oscuri potrebbero averne ancora bisogno.

fonte

2016-09-30 19:05:09

Sembra che non funzioni ancora. L'abbiamo provato in Litmus, ma non funziona. C'è qualche motivo speciale? –

@ArianHosseinzadeh Che cosa non funziona? Aggiunto un riferimento alla loro documentazione in merito. –

L'abbiamo provato in Litmus e ignora gli stili non in linea. Hai provato

risposta