Quirks mode alla riscossa
Inviato da Stefano Bagnara il Lun, 01/12/2008 - 18:12

Preparare l'html per una newsletter è un compito più complicato e soprattutto differente rispetto alla creazione di una pagina web. Oltre al fattore fondamentale, già preso in considerazione del blocco delle immagini [1], c'è da considerare innanzitutto il blocco degli stili (al quale dedicheremo un post successivo), ma anche il fatto che a differenza delle pagine web nelle quali possiamo scegliere il doctype [2] e quindi in qualche modo "spingere" i browser ad utilizzare una modalità di rendering piuttosto che un'altra, con l'html nelle newsletter questa operazione non funziona e quindi qualcuno vedrà il nostro html in quirks mode [3], altri in modalità standard e non abbiamo strumenti per evitarlo.
Analisi
Se scrivete html/css per il web sono anni che non vi preoccupate più del quirks mode e semplicemente inserite il doctype specifico dello standard con il quale state scrivendo (html4, xhtml 4.01, xml 1.1.. etc) e sapete che la stragrande maggioranza dei browser interpreterà il vostro html in maniera similare (anche se con varie eccezioni). Se invece scrivete html per le newsletter è meglio tirare fuori i vecchi link e i vecchi appunti [4] e tanta pazienza, perchè è tutto da scoprire.
Le differenze principali [5] tra le due modalità di renderizzazione sono:
- in quirks mode specificare una dimensione per un elemento farà si che tale dimensione *includa* bordo ed eventuale padding specificati, mentre in standard mode, padding e bordo sono da aggiungere alla dimensione specificata.
- in quirks mode gli stili non sono ereditati all'interno delle tabelle mentre in standard mode sì.
- le immagini sono elementi di tipo "block" in quirks mode, mentre sono elementi di tipo "inline" in standard mode.
Questo è il codice utilizzato per le due immagini visualizzate all'inizio di questo post. L'unica differenza è il DOCTYPE utilizzato. Potete verificare voi stessi seguendo questi [6] link [7] (Da notare che il risultato sarà diverso anche in funzione del browser utilizzato.)
<html>
<body bgcolor="#CCCCCC">
<center>
<font color="#FFFFFF" size="1">
Questo è un
<div style="background: #808080; border: 4px solid #FFFFFF; padding: 25px; width: 170px; height: 90px;">
<table><tr><td style="font-size: 200%;">Esempio</td></tr></table>
</div>
</font>
</center>
</body>
</html>
Per darvi una idea di quanto sia imprevedibile il metodo di visualizzazione riassumiamo di seguito le applicazioni testate e quale sia la modalità utilizzata:
- Rispettano il DOCTYPE dichiarato: Outlook Express, Windows Mail, Windows Live, Outlook 2003 (e precedenti), la webmail di GMX.
- Non usano un DOCTYPE (quirks mode): Thunderbird e le seguenti webmails: katamail, operamail, excite, aol, libero-classic, alice, tiscali, inet, jumpy, yahoo-nuovo, interfree, poste, lycos.
- Specificano un loro DOCTYPE (standard mode): Outlook 2007 (una sorta di standard mode), libero-new, hotmail, dada, yahoo-classic, gmail, email.it/leonardo/infinito,
Conclusioni
Il consiglio che vi diamo è quello di usare tabelle e non div per l'impostazione del layout in modo da mantenere il controllo delle larghezze indipendentemente dal quirks mode e di ripetere la definizione dello stile all'interno di ogni td in modo da non lasciare colore del font, dimensione ed altre informazioni di stile al "caso"
