HTML for Outlook

Con Outlook 2007 e 2010, la Microsoft ha sostituito l'engine per la composizione e la visualizzazione delle email da quello di Internet Explorer a quello di Word. Questo causa un bel problema a tutti quelli che come me, devono creare periodicamente delle email in HTML e fare in modo che queste abbiano la massima compatibilità con i vari client di posta.

La prima volta che ho visto una mia email su Outlook 2007 ho notato che tutto ciò che avevo imparato nel layout con DIV e CSS non serviva assolutamente a nulla, con mio rammarico ho capito che si doveva tornare in dietro di 10 anni e rincominciare ad utilizzare il layout a tabelle.
C'è della documentazione di Microsoft che fornisce un elenco di elementi HTML supportati e quali proprietà CSS possono supportare (trovate i link in fondo alla pagina), tuttavia non sempre tutto è come indicato nella documentazione.
Voglio perciò utilizzare questo post per elencare alcuni dei problemi che ho riscontrato e per dare alcuni suggerimenti.

Testare l'email
Anziché inviarmi una quantità infinita di email da visualizzare poi con Outlook, preferisco modificare il file HTML con il mio editor preferito, poi lo apro solo per la visualizzazione con Word, un po come se fosse un browser. In questo modo ho un' anteprima di quello che sarà su Outlook. Quando sono vicino al risultato inizio ad inviarmi le email.

Layout
Come già anticipato il layout dovrà essere fatto solo tramite tabelle. Andando a vedere nella documentazione,  si nota che le proprietà CSS supportate dal DIV sono poche, mentre TABLE e TD hanno un supporto quasi completo.

Selettori CSS
La documentazione non ne parla minimamente, fortunatamente ho notato che i selettori principali funzionano un po tutti:

div{ ... }
.nomeclasse{ ... }
#idelemento{ ... }
div strong .nomeClasse { ... }
table.nomeClasse { ... }


invece non funzionano

*{ ... }
div > strong { ... }

Altri tipi di selettori li testerò in futuro

Proprietà CSS
border-collapse: funziona correttamente solo se messa direttamente nell'attributo style della tabella. Se impostato dentro il tag style con valore collapse, tutte le tabelle prenderanno questa impostazione, consiglio quindi di utilizzarlo solo dentro l'attributo style.

background-color: il valore transparent applicato ad una tabella non funziona, ho provato in tutti i modi a rendere trasparente una tabella ma mi è stato impossibile, con altri colori non ci sono problemi.

Direttiva !important
In genere funziona, ma nel caso di border-collapse non ha funzionato.

Articoli Microsoft di riferimento
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)