2012-10-16 10 views
16

Ho recentemente sviluppato una newsletter per un mio cliente. Come mai non riesco a trovare buone informazioni su ciò che css e html sono sicuri da usare nei principali client di posta.Quali attributi html/css sono sicuri per posta?

Ho pensato che forse ci sono persone che hanno le conoscenze e possiamo creare una sorta di elenco di cose che funzionano nei principali client di posta.

Questa è una lista di client di posta popolari presi in prestito dal monitor della campagna. (Se ho dimenticato somthing dirmi)

Microsoft Outlook 
Apple Mail 
Hotmail 
Yahoo! Mail 
Gmail 

La domanda è: quali tag, attributi, stranezze speciali ci sono in questi i principali browser e come possono essere facilmente evitati.

Grazie per l'aiuto,

risposta

6

è possibile trovare un elenco completo di supportate e non supportate Funzionalità CSS per tutti i principali client di posta elettronica a Email Standard Project

A veramente bootstrap utile per lo sviluppo di e-mail HTML, che ha una tonnellata di separatori di discrepanza è HTML Email Bolerplate

E come regola generale - sempre utilizzare tavoli e tutte le vecchia scuola tag HTML (align, center, valign, color ecc). Alcuni reading sull'argomento.

0

Gmail supporta già il tag style nella testa

È possibile utilizzare un sottoinsieme di selettori CSS per applicare stili. Gmail supporta i selettori di classe, elemento e id .

<html> 
    <head> 
    <style> 
     .colored { 
     color: blue; 
     } 
     #body { 
     font-size: 14px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='body'> 
     <p>Hi Pierce,</p> 
     <p class='colored'>This text is blue.</p=> 
     <p>Jerry</p> 
    </div> 
    </body> 
</html> 

E media query:

È possibile utilizzare media query CSS standard per regolare lo stile di una e-mail per soddisfare dispositivo corrente dell'utente.Gmail supporta query sulla larghezza, l'orientamento e la risoluzione dello schermo.

<html> 
    <head> 
    <style> 
     .colored { 
     color: blue; 
     } 
     #body { 
     font-size: 14px; 
     } 
     @media screen and (min-width: 500px) { 
     .colored { 
      color:red; 
     } 
     } 
    </style> 
    </head> 
    <body> 
    <div id='body'> 
     <p>Hi Pierce,</p> 
     <p class='colored'> 
     This text is blue if the window width is 
     below 500px and red otherwise. 
     </p> 
     <p>Jerry</p> 
    </div> 
    </body> 
</html> 
Problemi correlati