こんにちは、小さな Web ベースの電子メール クライアントを構築しています。HTML メールの表示に問題があります。HTML メールの表示に関するベスト プラクティスは何ですか? 私が見つけたいくつかのこと
- CSS リセット
- メールの本文タグを剥がす
こんにちは、小さな Web ベースの電子メール クライアントを構築しています。HTML メールの表示に問題があります。HTML メールの表示に関するベスト プラクティスは何ですか? 私が見つけたいくつかのこと
まず、すべての CSS および HTML タグを許可しないことが重要です。ファイルを探して、定義済みの HTML タグと CSS 属性のセットを許可します。
たとえば、CSS をリセットしても<iframe>
、<form>
などの悪意のあるタグを送信できます。
そこで、どのような HTML タグをサポートしたいかを考え始め、それ以外のタグをすべて取り除きます。そして、CSSについても同じです。
これは決して簡単なことではありません。つまり、インタープリターを壊そうとする人々なども考慮に入れる必要があるということです...
このSitepoint Blogpostを調べると、人々が HTML メールをコーディングする方法が説明されています。したがって、そこから始めて、通常サポートされているものを確認することをお勧めします。
1 文の答えは、「1. テーブルベースのレイアウトを使用する、2. インライン CSS のみを使用する、3 . 可能なすべてのメール クライアントでテストする」です。
クライアント テストはおそらく最も重要です。なぜなら、すべての電子メール クライアント (およびクライアントとブラウザーの組み合わせ) には独自の癖がある可能性があり、その多くは途中で学習しただけだからです。Outlook が幅と高さのインライン スタイルに常に従うとは限らないため、HTML 属性の幅と高さを使用する、または、HTML 要素に明示的に margin:0 を設定しない限り、Gmail は画像の周りにマージンを追加する傾向がある、など。
あるクライアントで HTML メールの外観を修正すると、別のクライアントでそれが壊れてしまう場合は、スタイルをどんどん追加しないでください。マークアップをさらに書くことになるとしても、HTML/CSSを単純化するようにしてください。たとえば、パディングとマージンが適切に表示されない場合、テーブルに行または列を追加し、それらの高さ/幅を修正することで、同じ外観を実現できます。すべての電子メール クライアントが CSS ボックス モデルをどのようにレンダリングするかを心配するよりも、タグを増やす方が簡単です。
http://articles.sitepoint.com/article/code-html-email-newslettersなど、HTML-for-email に関する記事やブログ記事は役に立ちますが、新しいバージョンでは古くなっています。クライアントの。