Compatibilité des propriétés CSS dans les emails

Date de publication : 3/01/2008

Par Adrien Pellegrini

Cet article montre la compatibilité des propriétés CSS dans les emails au format HTML visualisés dans certains clients mails et webmails. Le résultat est assez surprenant.

1. Introduction
2. Les propriétés CSS et les webmails
3. Les propriétés CSS et les clients mails sur Windows
3. Les propriétés CSS et les clients mails sur Linux
5. Notes supplémentaires
6. Conclusion
7. Remerciements

1. Introduction

Le support de CSS dans les emails est assez catastrophique. Selon l'interface que vous utilisez pour lire vos emails (par interface j'entends client mails ou webmails), le résultat de l'email peut être tout à fait autre. De plus, comme vous pourrez le constater dans cet article, les points communs entre les diversers interfaces se font assez rares. Il est donc difficile d'envoyer un email correctement formaté avec du CSS.

Pour chaque interfaces, une liste assez complète de propriétés CSS à été testée. Vous trouverez également, en fin de tableau, une note qui correspond au nombre de "ticks" correspondant à l'interface.

Les tests ont été réalisés sur les clients mails et les webmails suivants :

Les différents clients mail et webmails ont été choisit par l'équipe de rédaction. Ils n'ont pas été choisit au hasard, mais tout simplement du top10 figurant sur quelques sites.
Veillez nous excuser si votre webmail ou client mail préféré ne figure pas dans la liste de test.

2. Les propriétés CSS et les webmails

  Gmail Windows Live Yahoo! AOL Inbox BlueBottle BigString MyWay LaPoste
style (head) no yes yes yes yes no yes yes yes
style (body) no yes yes yes yes no yes yes yes
link (head) no no no no no no no yes no
link (body) no no no no no no no na no
form yes no yes no yes yes yes no yes
* na yes yes yes yes na yes no no
element na yes yes no yes na yes no no
element element na yes yes yes yes na yes yes no
element > element na no yes no yes na yes no no
element + element na no yes yes yes na yes no yes
.element na yes yes yes yes na yes no yes
#element na yes yes yes yes na yes no yes
element[attribut] na no yes yes yes na yes yes yes
element:link na yes yes yes yes na yes no yes
element:visited na yes yes yes yes na yes no yes
element:hover na yes yes yes yes na yes no yes
element:active na yes yes yes yes na yes no yes
element:first-child na no no yes yes na yes no yes
element:focus na no yes yes yes na yes yes yes
element:first-line na yes yes yes yes na yes yes yes
element:first-letter na yes yes yes yes na yes yes yes
element:before na no no yes yes na yes yes yes
element:after na no no yes yes na yes yes yes
  Gmail Windows Live Yahoo! AOL Inbox BlueBottle BigString MyWay LaPoste
background-attachment no no yes yes no no yes yes yes
background-color yes yes yes yes yes no yes yes yes
background-image no no yes yes yes no yes yes yes
background-repeat no no yes yes yes no yes yes yes
background-position no no yes yes yes no yes yes yes
border yes yes yes yes yes no yes yes yes
float yes yes yes yes yes no yes yes yes
clear yes yes yes yes yes no yes yes yes
clip no no no yes yes no yes no yes
color yes yes yes yes yes no yes no yes
display no yes yes yes yes no yes yes yes
font-family no yes yes yes yes no yes no yes
font-size yes yes yes yes yes no yes no yes
font-style yes yes yes yes yes no yes yes yes
font-variant yes yes yes yes yes no yes yes yes
font-weight yes yes yes yes yes no yes yes yes
height no yes yes yes yes no yes yes yes
letter-spacing yes yes yes yes yes no yes yes yes
line-height yes yes yes yes yes no yes yes yes
list-style-type yes yes yes yes yes no yes yes yes
list-style-image no no no yes yes no yes yes yes
list-style-position yes yes yes yes yes no yes yes yes
margin yes no yes yes yes no yes yes yes
  Gmail Windows Live Yahoo! AOL Inbox BlueBottle BigString MyWay LaPoste
max-height yes no yes yes yes no yes yes yes
max-width yes no yes yes yes no yes yes yes
min-height yes yes yes yes yes no yes yes yes
min-width yes yes yes yes yes no yes yes yes
outline yes no yes yes yes no yes yes yes
overflow no yes yes yes yes no yes yes yes
padding yes yes yes yes yes no yes yes yes
position no no no yes yes no yes no yes
text-align yes yes yes yes yes no yes yes yes
text-decoration yes yes yes yes yes no yes yes yes
text-indent yes yes yes yes yes no yes yes yes
text-transform yes yes yes yes yes no yes yes yes
vertical-align yes yes yes yes yes no yes yes yes
visibility no yes yes yes yes no yes yes yes
white-space yes yes yes yes yes no yes yes yes
word-spacing yes yes yes yes yes no yes yes yes
z-index no no no yes yes no yes yes yes
caption-side yes no no no no no yes yes no
empty-cells yes no yes yes yes no yes yes yes
border-collapse yes no yes yes yes no yes yes yes
border-spacing yes no yes yes yes no yes yes yes
  Gmail Windows Live Yahoo! AOL Inbox BlueBottle BigString MyWay LaPoste
Note (/66) 31 41 56 61 63 1 63 48 58

3. Les propriétés CSS et les clients mail sur Windows

  Thunderbird Outlook 2007 Windows Live Dream Mail Foxmail Opera Incredi mail Poco Mail TheBat
style (head) yes yes yes yes yes yes yes yes yes
style (body) yes yes yes na yes yes yes yes yes
link (head) no no no no no no no no no
link (body) no no no na no no no no no
form no no no no no yes no no no
* yes no yes yes yes yes yes no yes
element yes yes yes yes yes yes yes yes yes
element element yes yes yes yes yes yes yes yes no
element > element yes no yes yes no yes no no no
element + element yes no yes yes no yes no no no
.element yes no yes no yes yes yes yes no
#element yes yes yes yes yes yes yes yes no
element[attribut] yes yes yes yes no yes no yes yes
element:link yes no yes yes yes yes yes yes no
element:visited yes no yes yes yes yes yes no no
element:hover yes no yes yes yes yes yes yes no
element:active yes no yes yes yes yes yes no no
element:first-child yes no no no no yes no no no
element:focus yes no yes no no yes no no no
element:first-line yes no no no yes yes yes no no
element:first-letter yes no yes   yes yes yes no no
element:before yes no no no no no no no no
element:after yes no no no no yes no no no
  Thunderbird Outlook 2007 Windows Live Dream Mail Foxmail Opera Incredi mail Poco Mail TheBat
background-attachment yes no yes yes yes no yes no no
background-color yes yes yes yes yes yes yes yes yes
background-image yes no yes yes yes no yes yes no
background-repeat yes no yes yes yes no yes yes no
background-position yes no yes yes yes no yes yes no
border yes yes yes yes yes yes yes yes yes
float yes no yes yes yes yes yes yes yes
clear yes no yes yes yes yes yes yes no
clip yes no yes yes yes no yes no no
color yes yes yes yes yes yes yes yes no
display yes yes yes yes yes yes yes yes no
font-family yes yes yes yes yes yes yes yes no
font-size yes yes yes yes yes yes yes yes yes
font-style yes yes yes yes yes yes yes yes yes
font-variant yes yes yes yes yes yes yes yes no
font-weight yes yes yes yes yes yes yes yes yes
height yes no yes yes yes yes yes yes yes
letter-spacing yes yes yes yes yes yes yes yes no
line-height yes yes yes yes yes yes yes yes no
list-style-type yes yes yes yes yes yes yes yes no
list-style-image yes no yes yes yes no yes no no
list-style-position yes yes yes yes yes yes yes no no
margin yes yes yes yes yes yes yes yes yes
  Thunderbird Outlook 2007 Windows Live Dream Mail Foxmail Opera Incredi mail Poco Mail TheBat
max-height yes no yes yes no yes no no no
max-width yes no yes yes no yes no no no
min-height yes no yes yes no yes no no no
min-width yes no yes yes no yes no no no
outline yes no yes yes no yes no no no
overflow yes no yes yes yes yes yes no no
padding yes no yes yes yes yes yes yes yes
position yes yes yes yes yes yes yes no no
text-align yes yes yes yes yes yes yes yes yes
text-decoration yes yes yes yes yes yes yes yes yes
text-indent yes yes yes yes yes yes yes yes no
text-transform yes no yes yes yes yes yes yes no
vertical-align yes yes yes yes yes yes yes yes yes
visibility yes yes yes yes yes yes yes yes no
white-space yes yes yes yes yes yes no no yes
word-spacing yes no yes yes yes yes yes no no
z-index yes no yes yes yes yes yes yes no
caption-side yes no no no no yes no no na
empty-cells yes no no no no yes no no no
border-collapse yes no no no no yes no no yes
border-spacing yes no no no no yes no no yes
  Thunderbird Outlook 2007 Windows Live Dream Mail Foxmail Opera Incredi mail Poco Mail TheBat
Note (/66) 63 27 54 50 45 56 47 36 20

4. Les propriétés CSS et les clients mail sur Linux et Mac OS X

  IceDove Kmail Mac OS X Mail
style (head) yes yes yes
style (body) yes yes yes
link (head) no no no
link (body) no no no
form no no no
* yes yes yes
element yes yes yes
element element yes yes yes
element > element yes yes yes
element + element yes no yes
.element yes yes yes
#element yes yes yes
element[attribut] yes yes yes
element:link yes no yes
element:visited yes no yes
element:hover yes no yes
element:active yes no yes
element:first-child yes no yes
element:focus yes yes yes
element:first-line yes yes yes
element:first-letter yes yes yes
element:before yes yes yes
element:after yes yes yes
  IceDove Kmail Mac OS X Mail
background-attachment yes yes no
background-color yes yes yes
background-image yes yes yes
background-repeat yes yes yes
background-position yes yes yes
border yes yes yes
float yes yes yes
clear yes yes yes
clip yes yes yes
color yes yes yes
display yes yes yes
font-family yes yes yes
font-size yes yes yes
font-style yes yes yes
font-variant yes yes yes
font-weight yes yes yes
height yes yes yes
letter-spacing yes yes yes
line-height yes yes yes
list-style-type yes yes yes
list-style-image yes yes yes
list-style-position yes yes yes
margin yes yes yes
  IceDove Kmail Mac OS X Mail
max-height yes yes yes
max-width yes yes yes
min-height yes yes yes
min-width yes yes yes
outline yes yes yes
overflow yes yes yes
padding yes yes yes
position yes yes yes
text-align yes yes yes
text-decoration yes yes yes
text-indent yes yes yes
text-transform yes yes yes
vertical-align yes yes yes
visibility yes yes yes
white-space yes yes yes
word-spacing yes yes yes
z-index yes yes yes
caption-side yes yes yes
empty-cells yes yes yes
border-collapse yes yes yes
border-spacing yes yes yes
  IceDove Kmail Mac OS X Mail
Note (/66) 63 57 62

5. Notes supplémentaires

Gmail :

text-indent: XX% ne marche pas.


Microsoft Oulook 2007 :

capitalize et lower-case ne marche pas.


DreamMail, FoxMail, Incredimail, Kmail :

blink ne marche pas.


PocoMail :

element[attribut="xxx"] ne marche pas, cela aura le même effet que element.
blink et overline ne marche pas.


The Bat! :

La balise caption est supprimée.
blink et overline ne marche pas.

6. Conclusion

Pour avoir la meilleure compatibilité possible de vos emails au format HTML, vous devez utiliser le style CSS dit "en ligne".

Il y a tellement de divergences entre les différents clients mails et les différents webmails que ça devient vite difficile de s'y retrouver. La seule solution est de tester, tester et tester vos emails.

7. Remerciements

Merci à christopheJ pour les tests sous MAC et à Lou Pitchoun pour la correction.


Ajouter aux favoris Ajouter aux favoris BlinkList Blogmarks del.icio.us Digg Furl Google ma.gnolia Netvouz reddit Simpy Spurl StumbleUpon Taggly Yahoo MyWeb

Copyright © 2007 Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide CSS - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2009 www.developpez.com - Legal informations.