web-dev-qa-db-ja.com

HTMLメール：mso条件付きのフォールバック？

あなたが私のようなら、あなたの目はこれを読む終わりまでにひきつります。私はあなたを責めません。

クライアントは、次の2つの仕様でレスポンシブHTMLメールテンプレートを開発するようにリクエストしました。

  1. できるだけ少ない画像を使用する
  2. できるだけ多くの「ファンシーcss対応機能」を使用します。ほとんどの場合、これはボックスの角が丸いことを意味します。

この質問は、丸い角を実行することに関するものです。 GmailとAppleはCSSの角丸をサポートし、Outlookはベクターグラフィックスを必要とします。残りのプラットフォームでは、正方形のエッジを使用しても問題ありません。

Outlookを検出して実行する方法は次のとおりです。

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

Outlook 2000に戻っても魅力のように機能します。問題は、フォールバックを作成する方法がわからないことです。直感はこう言います：

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

しかし、他のほとんどの電子メールクライアントはコメントとして完全に無視するだけであり、ボックスから角が完全に欠落しています。 SOコミュニティ：すべてのプラットフォームにマークアップをデプロイすることは可能ですか？except MSO？）または、電子メールHTMLはまだこのようなことを試みるにはあまりにも石器時代ですか？

outlookgmailhtml-emailvector-graphics
24
CodeMoose

頭を悩ませた後、解決策を見つけました。これの代わりに：

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

これは非常にうまく機能します：

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

フォールバックをMSOの非表示divにラップし、代わりにベクターソリューションを展開するだけです。

これが将来誰かを助けることを願っています！

49
CodeMoose

これは、非表示のdivを必要とせずに機能します。

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

トリックは、4行目でコメントを閉じる前にコメントを再度開くことです。

<!---->

ビット。そうしないと、IEは "->"をOutlook以外のコンテンツの前にレンダリングします。他のブラウザーにはこの問題はありません。

24
Frank Hagenson

CodeMooseのソリューションはフォールバックを隠しますが、私のテストでは、フォールバックwouldが存在する場所にスペースを残しました（Outlookはoverflow：hiddenをレンダリングしません）。他の要素にぶつかったため、私のレイアウトではうまくいきませんでした。

多くの検索の後、CodeMooseの提案に少し変更を加えると、フォールバックが非表示になり、不要なスペースは追加されない：

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

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

「mso-hide：all;」を追加することによりフォールバックの実際のスタイルに合わせて、Outlookはフォールバックコードを折りたたんで無視するため、レイアウトが維持されます。また、Outlook for Macのように、VMLを使用して複製しようとした複雑なCSSを処理できるクライアントでは、フォールバックが引き続き正常に表示されます。

10
ste7enm

@ font-face宣言でカスタムフォントを使用すると、OutlookがTimes New Romanに戻るという問題が発生しました。 Outlookから@ font-face宣言を非表示にする必要があるだけでなく、独自のスタイルブロックを囲む条件を使用しています。 （他のすべてのスタイルは別のブロックに入れます）。また、条件付きタグを使用してテキストコンテンツを二重にラップする必要がありました。 @CodeMoose（上記）が投稿したこの手法が、カスタムフォントを使用しているときにどのように機能するかの例を示します。

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

最初に、インラインスタイル内の「Museo300」フォント宣言の周りに条件を配置しようとしましたが、それは明らかに機能しなかったので、スタイル宣言でコンテンツを2つのスパンに二重にラップする必要がありました。内側のものは非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>

これは、OutlookがArialでテキストを表示するのに非常に役立ちますが、Apple mailはフォントMuseoでテキストを表示します。

4
tvgemert