web-dev-qa-db-ja.com

フレックス/グリッドのプロパティはGmailのメールで削除されます

PHPに、次のHTMLをメールで送信するスクリプトがあります。

<html class="no-js" lang="en">
   <body>
      <div style="width: 70%;background-color: #060b2b;margin: auto;flex-direction: column;display: flex;">

        <h1 style="margin-top: 50px;color: white;margin-left: auto;margin-right: auto;">Vous avez reçu une nouvelle notification.</h1>

        <div style="width: 80%;padding: 50px;margin-top: 50px;background-color: #222;margin-left: auto;margin-right: auto;display: flex;">
            <p style="color:white;margin: auto;text-align: center;">{{$notification}}</p>
        </div>

        <a href="" style="margin-top: 50px;margin-bottom: 50px;margin-left: auto;margin-right: auto;color: white;padding:15px;background-color: #0E0E0E;">Accéder à mon compte</a>
      </div>
   </body>
</html>

しかし、受信した電子メール（メインのdivを調べたとき）にはプロパティが表示されませんflex-direction: column;

Gmailはそれらのプロパティをフィルタリングしているようですか？

これは正常ですか？

phpcssflexboxgmailcss-grid
12
Baptiste Arnaud

HTML電子メールの設計は、HTMLWebサイトの設計とは異なります。電子メールクライアントとWebブラウザの間には大きな技術的ギャップがあります。まるでブラウザが進化し続けているかのようですが、電子メールクライアントは1998年に立ち往生しています。

HTML電子メールの世界では、埋め込みスタイルと外部スタイルが悪く、CSS3が悪く、JavaScriptが悪い一方で、レイアウト用のインラインスタイルとテーブルは優れています。この世界では、昔ながらのコーディング方法が健在です。

GmailがCSS3のプロパティを削除するのは当然のことです。あなたの最善の策は、テーブルとインラインスタイルに固執することです。

更新： Gmailは埋め込みスタイルをサポートするようになりました。

詳しくは：

12
Michael_B