web-dev-qa-db-fra.com

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

J'essaie de créer un courrier électronique HTML qui s'affichera correctement dans tous les clients de messagerie largement utilisés. J'emballe l'intégralité de l'e-mail dans un tableau. J'aimerais que sa largeur atteigne 98% de la largeur disponible, sans dépasser 800 pixels. Comme ceci: <table style="width:98%; max-width:800px;">

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

Au lieu de cela, je fais ceci: <table width="98%">

Est-il possible de définir également une largeur maximale sans s'appuyer sur CSS?

htmlemailhtml-emailcss
97
Tim Goodman

Oui, il existe un moyen d'émuler max-width à l'aide d'une table, ce qui vous donne une présentation réactive et compatible avec Outlook. De plus, cette solution ne nécessite pas de commentaires conditionnels. 

Supposons que vous vouliez l'équivalent d'une div centrée avec max-width de 350px. Vous créez une table, définissez la largeur sur 100%. Le tableau a trois cellules dans une rangée. Définissez la largeur de TD au centre sur 350 (à l'aide de l'attribut HTML width, pas de CSS), et voilà. 

Si vous souhaitez que votre contenu soit aligné à gauche au lieu de centré, laissez simplement 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>

Au jsfiddle, je donne à la table une bordure pour que vous puissiez voir ce qui se passe, mais vous ne voudriez évidemment pas en avoir une dans la vie réelle:

http://jsfiddle.net/YcwM7/

185
Mark Nugent

Il existe une astuce que vous pouvez faire pour Outlook 2007 en utilisant des commentaires HTML conditionnels.
Le code ci-dessous vous assurera que la table Outlook a une largeur de 800px, que sa largeur n'est pas maximale mais qu'elle fonctionne mieux que de la laisser 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>
33
Shay Erlichmen

La réponse courte: non.

La réponse longue:

Les formats fixes fonctionnent mieux pour les emails HTML. D'après mon expérience, vous feriez mieux de prétendre que c'est en 1999 qu'il s'agit de courriels HTML. Soyez explicite et utilisez les attributs HTML (width = "650") lorsque cela est possible dans vos définitions de table, pas CSS (style = "width: 650px"). Utilisez des largeurs fixes, pas de pourcentages. Une largeur de table de 650 pixels de large est une valeur sûre. Utilisez CSS en ligne pour définir les propriétés du texte.

Ce n'est pas une question de savoir ce qui fonctionne dans les "emails HTML", mais plutôt la pléthore de clients de messagerie et leur capacité limitée (et parfois délibérément dans le cas de Gmail, Hotmail, etc.) à rendre le code HTML.

13
Diodeus - James MacFarlane

Peu en retard à la fête, mais cela se fera. J'ai quitté l'exemple à 600, car c'est ce que la plupart des gens vont utiliser:

Semblable à l'exemple de Shay, à l'exception de ceci, inclut également max-width pour fonctionner sur les autres clients pris en charge, ainsi qu'une deuxième méthode permettant d'empêcher l'expansion (requête multimédia) nécessaire pour Outlook '11.

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]-->

Voici un autre exemple de cette utilisation: E-mails de confirmation de commande responsive pour appareils mobiles?

4
John

C'est la solution qui a fonctionné pour moi

https://Gist.github.com/elidickinson/5525752#gistcomment-1649300 , grâce à @ philipp-klinz

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>
0
henry