Existe-t-il un équivalent de CSS max-width qui fonctionne dans les courriers électroniques HTML ?

Question

J'essaie de créer un courriel HTML qui s'affichera correctement dans tous les clients de messagerie les plus courants. Je place l'ensemble de l'e-mail dans un tableau et j'aimerais qu'il ait une largeur pouvant atteindre 98 % de la largeur disponible, mais ne dépassant pas 800 pixels. Comme ceci : <table style="width:98%; max-width:800px;">

Mais je ne le fais pas de cette façon, puisque selon ce qui suit Outlook 2007 ne prend pas en charge la propriété CSS width.

A la place, je fais ça : <table width="98%">

Existe-t-il un moyen de définir également une largeur maximale sans recourir aux CSS ?

Answer 1

Oui, il y a un moyen d'émuler max-width à l'aide d'un tableau, ce qui permet d'obtenir une mise en page à la fois réactive et adaptée à Outlook. De plus, cette solution ne nécessite pas de commentaires conditionnels.

Supposons que vous vouliez l'équivalent d'un centré div con max-width de 350px . Vous créez une table, définissez le width a 100% . Le tableau comporte trois cellules dans une rangée. Définissez la largeur de la cellule centrale TD a 350 (en utilisant le code HTML width et non CSS), et voilà.

Si vous voulez que votre contenu soit aligné à gauche au lieu d'être centré, il suffit de laisser la première cellule vide.

Exemple :

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table> 

Dans le jsfiddle, je donne à la table une bordure pour que vous puissiez voir ce qui se passe, mais il est évident que vous n'en voudriez pas dans la vie réelle :

http://jsfiddle.net/YcwM7/

Answer 2

Il existe un truc que vous pouvez faire pour Outlook 2007 en utilisant des commentaires html conditionnels.
Le code ci-dessous permet de s'assurer que le tableau Outlook a une largeur de 800px, ce n'est pas la largeur maximale mais c'est mieux que de laisser le tableau s'étendre sur toute la fenêtre.

<!--[if gte mso 9]>
<style>
#tableForOutlook {
  width:800px;
}
</style>
<![endif]-->

<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
  <table id="tableForOutlook"><tr><td>
<![endif]-->
    <tr><td>
    [Your Content Goes Here]
    </td></tr>
<!--[if gte mso 9]>
  </td></tr></table>
<![endif]-->
<table>

Answer 3

La réponse courte : non.

La réponse longue :

Les formats fixes fonctionnent mieux pour les courriels en HTML. D'après mon expérience, il est préférable de faire comme si on était en 1999 lorsqu'il s'agit de courriels en HTML. Soyez explicite et utilisez autant que possible les attributs HTML (width="650") dans vos définitions de tableaux, et non les CSS (style="width:650px"). Utilisez des largeurs fixes, pas de pourcentages. Une largeur de tableau de 650 pixels est une valeur sûre. Utilisez le CSS en ligne pour définir les propriétés du texte.

Il ne s'agit pas de savoir ce qui fonctionne dans les "e-mails HTML", mais plutôt de la pléthore de clients de messagerie et de leur capacité limitée (et parfois délibérée dans le cas de Gmail, Hotmail, etc.) à rendre le HTML.

Answer 4

C'est un peu tard pour le faire, mais ça va le faire. J'ai laissé l'exemple à 600, car c'est ce que la plupart des gens utiliseront :

Dans la tête :

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

Dans le corps :

<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
main content here
    </td>
  </tr>
</table>

</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

Similaire à l'exemple de Shay, sauf qu'il inclut également une largeur maximale pour fonctionner sur le reste des clients qui ont un support, ainsi qu'une deuxième méthode pour empêcher l'expansion (media query) qui est nécessaire pour Outlook '11.

Voici un autre exemple d'utilisation : Des e-mails de confirmation de commande réactifs pour les appareils mobiles ?