Gmailがディスプレイをサポートするようになりました：なし;：メールデザインにとっての意味

公開: 2016-09-01

Gmailは、メール開発者の間で多くの頭痛の種の原因となっています。 電子メールの<head>の<style>タグのサポートの欠如を含む、多くのCSSプロパティのサポートの欠如は、世界中の電子メール開発者の集合的なため息を引き起こしました。 特にGmailの場合、メールのコーディングは困難です。

しかし、2016年8月31日、世界中のメールオタクがGmailで大きな変化が起こっていることに気づきました。 CSSプロパティのdisplay: none;サポートを開始しましたdisplay: none; 。

display：noneとは; ？

display:none; メールの特定の要素を非表示にするCSSプロパティです。 たとえば、 display:none; 受信トレイに表示するプレビューテキストを制御するために使用するが、電子メールの本文には表示したくないプリヘッダーテキストを非表示にするために使用できます。 または、サブスクライバーがモバイルデバイスで開いたときに非表示にするデスクトップ固有のコンテンツを制御するために使用できます。

リトマスをお試しください

Gmailでメールをプレビューする

Gmailの変更がデザインにどのように影響したかをご覧ください。 Litmusを使用して、Gmailおよび50以上の他のメールクライアントでメールを即座にプレビューします。

Litmusを無料でお試しください→

ただし、Gmailはdisplay:none;使用をサポートしていませdisplay:none; 過去には、電子メールコミュニティに多くのフラストレーションを引き起こしていました。

これまで、Gmailのメールの本文からプリヘッダーテキストを非表示にするには、メールデザイナーは次の回避策のいずれかを使用する必要がありました。

  • <div style=”max-height: 0px; overflow: hidden;”></div>
  • <div style=”width: 0px; height: 0px; max-width: 0px; max-height: 0px; overflow: hidden;”></div>
  • <img style=”width: 0px; height: 0px;” />

これらの回避策を設定し、これらのCSSプロパティをサポートしていない可能性のある他のクライアントのスタイルを上書きすると、非常に時間がかかり、開発とテストに時間がかかる場合があります。

今、状況は変わったようです。これは、今年のメールデザイナーにとって最大のニュースかもしれません。

Gmailはdisplay：noneをサポートするようになりました。

今週、気配りの行き届いたメールオタクが見つけたように、Gmailはdisplay:none;使用をサポートしてdisplay:none; 以下を含む、テストしたすべての重要なHTML要素について。

  • <div>
  • <img>
  • <a>
  • <table>
  • <input>

あなたがそれを見る前にそれを信じませんか？ 私たちもしませんでした。 だからここにあなたがチェックアウトするためのスクリーンショット付きのコード例があります：

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Gmail display: none;</title> <style> @media screen and (max-width: 2000px) { * [summary~="hide"] {display:none;} } </style> </head> <body> <div>I will not show</div> <div class="hide" summary="hide">I will not show in Gmail.com webmail accounts</div> <a href="https://litmus.com">I will not show</a> <img src="http://pages.litmus.com/l/31032/2015-06-30/3kn7qh/31032/63832/litmus_logo_white.png" width="130" height="48"> <table> <tr> <td>I will not show</td> </tr> </table> <input type="checkbox"> </body> </html>

この変更は、Gmail、Google Apps、Inbox by Gmailなど、クライアントのファミリー全体に展開されました。

表示：なし; Gmailでのサポート

チェックグリーン

Gmail（Chrome / Firefox / Explorerの@ gmail.comアドレス）

チェックグリーン

Googleアプリ（Chrome / Firefox / Explorer）

チェックグリーン

Gmailによる受信トレイ（Chrome + Firefox）

チェックグリーン

Gmailによる受信トレイ（iOS / Android）

チェックグリーン

Gmailアプリ（iOS / Android）

変更されていないのは、GmailではCSSクラスまたはIDがまだサポートされていないことです。つまり、CSSをインライン化し、 display:none;を含むすべてのスタイル情報を移動する必要がありますdisplay:none; プロパティ-HTMLメールの本文に。

その他の影響

電子メールクライアントでのCSSサポートの変更と同様に、 display:none;サポートdisplay:none; Gmailには、いくつかの興味深い影響があります。

GmailiOSアプリのフォントスケーリングを制御するハック

iOS版のGmailアプリでは、自動フォントスケーリングが実際の問題でした。 フォントサイズが拡大され、アプリ内でメールが壊れているように見えます。 これが起こらないようにするためにハックが導入されました：

 <div> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </div>

display:none;としてdisplay:none; Gmail（iOSアプリを含む）でサポートされるようになりました。このハックは機能しなくなり、数百通のメールが再び破壊されます。 修正があります— display:none;削除または移動するだけdisplay:none; インラインCSSから埋め込みCSSへ。 FreshInboxのJustinKhooが、この修正についてここに書いています。

属性セレクターハックで要素を非表示にします（メディアクエリを含む！）

Gmailは通常<head>でCSSをサポートしていませんが、一部のCSSセレクターは機能します。特に、@ gmail.comアドレスのlangとsummaryのみです。 例えば：

 * [summary~="foo"]{ {display:none;} }

これは、Gmailでも機能するHTMLの要素をターゲットにするために使用できます。

 <div summary=”foo”>I will not display (even in Gmail)</div>

Gmailがdisplay:none;サポートdisplay:none; 、メディアクエリと組み合わせて使用​​すると、Gmailウェブメールのコンテンツを非表示にできます。

 @media screen and (max-width: 600px) { * [summary~="hide"] {display:none;} } <div summary=”hide”>I will not display when width is 600px or below</div>

Gmailを修正していないときはどうするかについてのアイデア

メールの開発とトラブルシューティングに費やす時間が大幅に短縮されたので、今利用できるすべての空き時間をどうしますか？ ここにいくつかの提案があります：

  • この変更が永続的であることを指を交差させてください
    受信トレイプロバイダーは、レンダリングエンジンへの変更をテストすることがありますが、いつでも変更をロールバックできます。 彼らがこれを決して奪わないことを願いましょう。 彼らにツイートして、変更に感謝していることを知らせてみませんか？
  • リトマスのスニペットライブラリをロードする
    すべての新しいdisplay:none; Gmailのハッキング。
  • 本を読む
    それが電子メールに関するものであれば問題ありません。 これが私たちの推奨事項です。
  • テスト、テスト、そしてもう少しテスト
    電子メールクライアントは今後もこのような予告なしの変更を展開し続けるため、送信するすべての電子メールのテストを続けてください。

Gmailでメールをプレビューする

これらの変更はメールのデザインにどのように影響しましたか？ Litmusを使用して、Gmail（および50以上の他の電子メールクライアント）で電子メールを即座にプレビューし、デザインが意図したとおりに表示されていることを確認します。

Gmailからのこの更新は、メールクライアントがメールコミュニティに通知せずにサポートを変更する方法の代表的な例です。 常に最善のメールを前に出していることを確認してください。 すべての送信の前にすべての電子メールをテストします。

Litmusを無料でお試しください→