web-dev-qa-db-ja.com

GmailのHTMLメール-CSSスタイル属性が削除されました

私はHTMLメールに取り組んでいて、 MailChimpのレスポンシブメールテンプレート を CSSインラインツール と組み合わせて使用​​しています。ほとんどの場合、メールは無数のメールクライアントで見栄えがしますが、Gmailでは物事がひどく誤って伝えられています。

返信矢印の横にあるプルダウンメニューからGmailの[元のメッセージを表示]オプションを使用すると、元のHTMLが実際にメールクライアントに表示されるものと異なります。これを確認するには、開発者ツールで要素を調べます。これはデスクトップとモバイルで発生します。電子メールクライアントは、要素からインラインスタイル属性を削除しています。

要素にクラスも含まれている場合は、style属性を削除するための基準の1つであるようです。誰かがこれを確認できますか？また、テーブルタグからすべてのスタイル属性を削除するように見えます。誰かもこれを確認できますか？

これの回避策は何ですか？

GmailとYahooのソースを含むメールのスクリーンショットを以下に示します。

Chrome開発者ツールを介してソースが表示されたGmailのメールのスクリーンショット

enter image description here

Chromeデベロッパーツールを介してソースが表示されたYahooのメールのスクリーンショット

enter image description here

gmailhtml-emailmailchimp
25
Matty B

私の仕事でマーケティングキャンペーンのメールを定期的にコーディングする人として、私はあなたの痛みを感じます。 Gmailは、他の多くのメールクライアントと同様に、コード化するのが少しファンキーな場合があります。まず、体の外にあるCSSをすべて取り除きます。したがって、メディアクエリやドキュメントレベルのスタイルなどを設定しても機能しません。私があなたに与えることができる最高のアドバイスは、インラインCSSを手動でコーディングし、空想を避けようとすることです。実際、HTML属性を使用してスタイルを設定できる場合は、CSSの代わりにそれを使用します。例としては、background-colorではなくbgcolorがあります。

ここに私が見つけたあなたの特定の問題に関連する 記事 があります。幸運を祈ります。

24
Matt Whitehead

今チェックしたところ：;、,、:文字の間にスペースを入れないと、Gmailはインラインスタイル属性を削除します

これはうまくいきます：

<span style="color: #8d8c87; display: block; font-family: Arial, sans-serif; font-size: 12px; line-height: 120%; text-align:center;">text</span>

ただし、スペースを使用しない場合は、同じルールが削除されます。これを書いた場合：

<span class="small-text" style="color:#8d8c87;display:block;font-family:'Titillium Web',Arial,sans-serif;font-size:12px;line-height:120%;text-align:center">text</span>

gmailクライアントで次の出力が得られます。

<span>text</span>

[〜＃〜]編集[〜＃〜]：

この動作に加えて、ネストされたfont-familyまたは<table>内で<td>を宣言すると、Gmailがインラインスタイルを削除する傾向があることに気付きましたが、それでもまだわかりませんプリプロセッサの一般的なルールです。Googleで確認しましたが、GmailのHTMLメール構成に関する公式ドキュメントは見つかりません。

18
pastorello

Gmailには複数の回避策があります。 Gmailは、スタイリングに関してはかなりジョーカーです。Gmailは、気に入らないものをメールから完全に取り除くためです。

ここにいくつかの小さなヒントがあります：

Gmailは画像の間に空白を追加するか、コンテナのサイズを拡大しますtd：画像にstyle = "display：block"を指定することでこれを修正できます（TDが同じ幅であることを確認してください）および/またはあなたのイメージとしての高さ）。

Gmailは黒いリンクを青いリンクとしてレンダリングします：はい、これは醜いです。 ＃000000の代わりに＃000001を使用します。

Gmailは電話番号をクリック可能にします。クライアントによっては、それが良いかどうかはわかりませんが、これを回避する1つの方法は、電話番号の周りにスタイルを設定した空のアンカータグを含めることです。

例：<a style="color:#000001; text-decoration:none;>555 555-5555</a>。それはあなたのコードを恥ずかしく感じるでしょうが、それは効果的な小さなハックです。

4
R Lacorne

これをミックスに追加すると思いました。私もこの問題に遭遇し、生のソースを見ると、8ビットのエンコーディングが1000文字の制限のために奇妙な場所で行を分割していることに気付いたので、次のようなコンテンツで終わりました：

_<td style="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">734 340 9795</td></tr><tr> <td sty
 le="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">
_

解決策は、コンテンツをbase64エンコードし、チャンクスプリットまたは同じことを行うために必要なツールを使用することです。

Phpでは$html = chunk_split(base64_encode($html))を実行し、次に_Content-Transfer-Encoding: base64_を設定しました。今Gmailは私を愛しています。

3
billynoah

CSSセレクターの使用は、私が使用できた別の回避策です。私の例では、HTMLテーブルをフォーマットしようとしています。 GmailがすべてのID属性とCLASS属性を取り除いたため、CSSが役に立たなくなっていました。

調査したところ、Gmailが私のタイトル属性を削除していないことに気付きました。そこで、タイトルセレクターを使用してCSSルールを作成しました。これは正常に動作するようです：

[title~=myTitle] {background: black; color: white;}

これはベストプラクティスではないと思いますが、私はそれについて言及したいと思いました。

1
ScottyG