web-dev-qa-db-fra.com

Emails HTML: solution de rechange pour mso conditionnelle?

Si vous êtes comme moi, votre œil tremblera à la fin de la lecture de ceci. Je ne te blâme pas.

Notre client nous a demandé de développer un modèle d'e-mail HTML réactif, avec deux spécifications:

  1. Utiliser le moins d'images possible
  2. Utilisation du plus grand nombre possible de "fonctionnalités compatibles CSS". Surtout, cela signifie simplement des coins arrondis sur les boîtes.

Cette question concerne spécifiquement l'exécution des coins arrondis. Gmail et Apple prend en charge les coins arrondis CSS et Outlook nécessite des graphiques vectoriels. Pour les plates-formes restantes, ils acceptent d'utiliser des bords carrés.

Voici comment nous détectons et exécutons Outlook:

<!--[if mso]><v:shape>...</v:shape><![endif]-->

Fonctionne comme un charme, même dans Outlook 2000. Le problème est que je ne peux pas comprendre comment créer un repli. L'intuition dit ceci:

<!--[if !mso]>...<![endif]-->

mais il est simplement ignoré comme un commentaire par la plupart des autres clients de messagerie, puis les coins manquent complètement dans les boîtes. Je vous demande, chers membres de la communauté SO: est-il possible de déployer le balisage pour toutes les plates-formes sauf MSO? Peut-être y a-t-il un moyen plus intelligent pour y parvenir que je ou le HTML des e-mails est-il encore trop vieux pour essayer quelque chose comme ça?

outlookgmailhtml-emailvector-graphics
24
CodeMoose

J'ai trouvé une solution après beaucoup de cervelles. Au lieu de cela:

<!--[if mso]><v:shape>...</v:shape><![endif]-->
<!--[if !mso]>[fallback goes here]<![endif]-->

Cela fonctionne très bien:

<!--[if mso]>
    <v:shape>...</v:shape>
    <div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->

    [fallback goes here]

<!--[if mso]></div><![endif]-->

Tout ce qu'il fait est d'enrouler le repli dans un div invisible dans MSO et déploie la solution vectorielle à la place.

J'espère que cela aidera quelqu'un à l'avenir!

49
CodeMoose

Cela fonctionne également, sans avoir besoin du div caché.

 <!--[if mso]>
     Outlook content
 <![endif]-->
 <!--[if !mso]> <!---->
     Non-Outlook content
 <!-- <![endif]-->

L'astuce consiste à rouvrir le commentaire avant de le fermer sur la 4ème ligne - le

<!---->

bit. Si vous ne le faites pas, IE affiche "->" avant le contenu non Outlook. Les autres navigateurs n'ont pas ce problème.

24
Frank Hagenson

Bien que la solution de CodeMoose masque la solution de rechange; dans mes tests, il a laissé de la place pour le repli (j'ai lu qu'Outlook ne restitue pas le débordement: caché). Cela n'a pas fonctionné pour ma mise en page car il a supplanté d'autres éléments.

Après beaucoup de recherches, j'ai trouvé que si vous apportiez une petite modification à la suggestion de CodeMoose, cela cacherait votre solution de rechange et n'ajoutera aucun espacement inutile:

<!--[if mso]>
<v:shape>...</v:shape>
<![endif]-->

<[fallback goes here] style="mso-hide:all;">

En ajoutant "mso-hide: all;" au style réel de votre solution de repli, Outlook se réduira et ignorera votre code de secours, préservant ainsi votre mise en page. Et votre solution de rechange s'affiche toujours correctement dans les clients qui peuvent gérer le CSS complexe que vous avez utilisé VML pour essayer de répliquer, comme dans Outlook pour Mac.

10
ste7enm

J'ai eu quelques problèmes avec Outlook retombant à Times New Roman lors de l'utilisation d'une police personnalisée avec la déclaration @ font-face. Non seulement ai-je dû masquer la déclaration @ font-face d'Outlook en utilisant le conditionnel autour de son propre bloc de style. (tous les autres styles vont dans un autre bloc). J'ai également dû doubler mon contenu textuel en plusieurs fois avec la balise conditionnelle. Juste pour donner un exemple du fonctionnement de cette technique telle que publiée par @CodeMoose (ci-dessus) lors de l'utilisation d'une police personnalisée.

<!--[if !mso]><!-->
    <style type="text/css">    
        @font-face {
            font-family: 'Museo100';
            src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot');
            src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot?#iefix') format('embedded-opentype'),
                 url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.woff') format('woff'),
                 url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.ttf') format('truetype'),
                 url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.svg#museo100') format('svg');
            font-weight: normal;
            font-style: normal;
        }
<!--<![endif]-->

J'ai d'abord essayé de mettre le conditionnel autour de ma déclaration de police "Museo300" dans le style en ligne, mais cela n'a évidemment pas fonctionné, j'ai donc dû doubler mon contenu en deux plages avec des déclarations de style. L'intérieur étant conditionnel pour les non MSO.

<span style="color: #00B2EB; font-family: arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: normal;">
    <!--[if !mso]><!--><span style="font-family: Museo100;"><!--<![endif]-->
    Text goes here, shown in Museo in Apple mail while this method shows in Arial in Outlook (and others that do not support custom fonts  
    <!--[if !mso]><!--></span><!--<![endif]-->
</span>

Cela fonctionne très bien pour qu'Outlook affiche le texte dans Arial tandis que Apple mail affichera le texte dans la police Museo. D'autres clients (comme la messagerie sur Android) ont un comportement de secours normal et affichent simplement Arial.

4
tvgemert