IP Girl
  1. IP Girl
  3. Y a-t-il un équivalent de CSS max-width qui fonctionne dans les emails HTML?
Intereting Posts
Performance statistique de cartes et d’ensembles purement fonctionnels Obtenir des plots R dans LaTeX? Visual Studio IDE: Je veux qu’il fasse un son après sa compilation pour que je puisse reprendre le travail Logique pour tester que 3 sur 4 sont True Quand NE PAS utiliser le entity framework Singe Patching dans Rails 3 Créer une requête SQL pour récupérer les enregistrements les plus récents Comment puis-je obtenir l’object de session au spring? Comment interroger des objects basés sur des classes abstraites dans Django? Comment obtenir TOUS les contrôles enfants d’un formulaire Windows Forms d’un type spécifique (Button / Textbox)? créer un bitmap vide et dessiner à travers la canvas dans Android Pourquoi nous devons append Fichiers app.config / web.config spécifiques aux développeurs dans Visual Studio Dans un conflit de fusion git, quels sont les fichiers BACKUP, BASE, LOCAL et REMOTE générés? java.lang.IllegalArgumentException: Aucun convertisseur trouvé pour la valeur de retour du type

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

J’essaie de créer un email HTML qui s’affichera correctement dans tous les clients de messagerie largement utilisés. J’emballe tout le courrier électronique dans une table et j’aimerais qu’il ait une largeur pouvant atteindre 98% de la largeur disponible, mais pas plus de 800 pixels. Comme ceci:

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

Au lieu de cela, je fais ceci:

Existe-t-il un moyen de définir également une largeur maximale sans s’appuyer sur CSS?

Oui, il existe un moyen d’émuler max-width utilisant un tableau, vous donnant ainsi 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 une max-width de 350px . Vous créez une table, définissez la largeur à 100% . La table a trois cellules dans une rangée. Définissez la largeur du centre TD à 350 (en utilisant l’atsortingbut HTML width , pas CSS), et voilà.

Si vous voulez que votre contenu soit aligné à gauche plutôt que centré, omettez simplement la première cellule vide.

Exemple:
The width of this cell should be a maximum of 350 pixels, but shrink to widths less than 350 pixels.

Dans le jsfiddle, je donne une bordure à la table pour que vous puissiez voir ce qui se passe, mais de toute évidence vous n’en voudriez pas dans la vraie vie:

http://jsfiddle.net/YcwM7/

Il existe un truc que vous pouvez faire pour Outlook 2007 en utilisant des commentaires HTML conditionnels.
Le code ci-dessous s’assurera que la table Outlook a une largeur de 800px, que sa largeur n’est pas maximale mais que cela fonctionne mieux que de laisser la table s’étendre sur toute la fenêtre. 

  
  
 [Your Content Goes Here]

La réponse courte: non.

La longue réponse:

Les formats fixes fonctionnent mieux pour les emails HTML. D’après mon expérience, il est préférable de prétendre qu’il s’agit de 1999 en ce qui concerne les courriels HTML. Soyez explicite et utilisez les atsortingbuts HTML (width = “650”) dans la mesure du possible dans vos définitions de table, pas CSS (style = “width: 650px”). Utilisez des largeurs fixes, aucun pourcentage. Une largeur de table de 650 pixels de large 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 “courriels HTML”, mais plutôt de la pléthore de clients de messagerie et de leur capacité limitée (et parfois délibérément dans le cas de Gmail, Hotmail, etc.) à générer du HTML.

Un peu tard pour la fête, mais cela va le faire. J’ai quitté l’exemple à 600, car c’est ce que la plupart des gens vont utiliser:

Semblable à l’exemple de Shay sauf que cela inclut également max-width pour travailler sur le rest des clients qui ont un support, ainsi qu’une deuxième méthode pour empêcher l’expansion (requête de média) nécessaire pour Outlook ’11.

Dans la tête:

Dans le corps: 

  
 
 
  main content here

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

C’est la solution qui a fonctionné pour moi

https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , merci à @ philipp-klinz