wake-up-neo.com

HTML Emails: Fallback für mso bedingt?

Wenn Sie wie ich sind, wird Ihr Auge am Ende des Lesens dieses zucken. Ich beschuldige dich nicht.

Unser Kunde hat uns gebeten, eine responsive HTML-E-Mail-Vorlage mit zwei Spezifikationen zu entwickeln:

  1. Verwenden Sie so wenig Bilder wie möglich
  2. Verwenden Sie so viele "ausgefallene CSS-fähige Funktionen" wie möglich. Meistens bedeutet dies nur abgerundete Ecken auf Kisten.

Bei dieser Frage geht es speziell um die Ausführung der abgerundeten Ecken. Google Mail und Apple unterstützt CSS mit abgerundeten Ecken, und Outlook benötigt Vektorgrafiken. Für die übrigen Plattformen können keine quadratischen Kanten verwendet werden.

So erkennen und führen wir Outlook aus:

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

Funktioniert wie ein Zauber, sogar zurück zu Outlook 2000. Das Problem ist, dass ich nicht herausfinden kann, wie ein Fallback erstellt wird. Die Intuition sagt dies:

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

aber es wird von den meisten anderen E-Mail-Clients als Kommentar einfach komplett ignoriert, und dann fehlen Ecken in den Feldern insgesamt. Ich frage Sie, liebe Mitglieder der SO Community: Ist es möglich, Markups für alle Plattformen bereitzustellen außer MSO? Vielleicht gibt es einen klügeren Weg, dies zu erreichen, als ich Haben Sie nicht darüber nachgedacht? Oder ist E-Mail-HTML noch zu alt, um so etwas zu versuchen?

24
CodeMoose

Nach langem Überlegen eine Lösung gefunden. An Stelle von:

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

Das funktioniert sehr gut:

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

Alles, was Sie tun müssen, ist, den Fallback in ein unsichtbares Div in MSO zu packen und stattdessen die Vektorlösung bereitzustellen.

Hoffe das hilft jemandem in der Zukunft!

49
CodeMoose

Dies funktioniert auch ohne das versteckte div.

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

Der Trick besteht darin, den Kommentar erneut zu öffnen, bevor er in der 4. Zeile geschlossen wird - der

<!---->

bisschen. Wenn Sie das nicht tun, rendert IE "->" vor den Nicht-Outlook-Inhalten. Andere Browser haben dieses Problem nicht.

24
Frank Hagenson

Die Lösung von CodeMoose verbirgt zwar den Fallback. In meinen Tests ließ es Platz für den Fallback (ich habe gelesen, dass Outlook den Überlauf nicht rendert: versteckt). Das hat bei meinem Layout nicht funktioniert, da es andere Elemente herausgeholt hat.

Nach langem Suchen stellte ich fest, dass, wenn Sie den Vorschlag von CodeMoose geringfügig ändern, Ihr Fallback ausgeblendet wird und es werden keine unnötigen Abstände hinzugefügt:

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

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

Durch Hinzufügen von "mso-hide: all;" Outlook wird entsprechend dem Stil Ihres Fallbacks minimiert und Ihren Fallback-Code ignoriert, wodurch Ihr Layout erhalten bleibt. Und Ihr Fallback wird in Clients, die das komplexe CSS handhaben, das Sie mit VML repliziert haben, wie in Outlook für Mac, weiterhin einwandfrei angezeigt.

10
ste7enm

Ich hatte einige Probleme mit Outlook, als ich auf Times New Roman zurückgegriffen habe, als ich eine benutzerdefinierte Schriftart mit @ font-face-Deklaration verwendete. Ich musste nicht nur die @ font-face-Deklaration in Outlook mithilfe der Bedingung um den eigenen Stilblock verbergen. (Alle anderen Stile gehen in einen anderen Block). Außerdem musste ich meinen Textinhalt mit dem bedingten Tag doppelt in Felder einschließen. Nur um ein Beispiel zu geben, wie diese von @CodeMoose (oben) bereitgestellte Technik bei Verwendung einer benutzerdefinierten Schriftart funktioniert.

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

Zuerst habe ich versucht, die Bedingung um meine "Museo300" -Schriftartdeklaration innerhalb des Inline-Stils zu setzen, aber das hat offensichtlich nicht funktioniert, sodass ich meinen Inhalt doppelt in zwei Felder mit Stildeklarationen einwickeln musste. Die innere Bedingung ist für Nicht-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> 

Dies funktioniert hervorragend, wenn Outlook den Text in Arial anzeigt, während Apple mail den Text in Museo anzeigt. Andere Clients (wie Mail auf Android) haben ein normales Fallback-Verhalten und zeigen nur Arial an.

4
tvgemert