私は最近、私のクライアントのためにニュースレターを作成しています。どの css と html が主要なメール クライアントで安全に使用できるかについて、良い情報を見つけることができないようです。
ここには知識のある人がいて、主要なメールクライアントで機能するもののリストを作成できるのではないかと思いました。
キャンペーンモニターさんからお借りした人気のメールクライアント一覧です。（何か忘れていたら教えてください）
Microsoft Outlook
Apple Mail
Hotmail
Yahoo! Mail
Gmail
問題は、これらの主要なブラウザーにどのようなタグ、属性、特別な癖があり、それらをどのように簡単に回避できるかです。
助けてくれてありがとう、
Campaign Monitor には、一般的なメール クライアントでの CSS サポートの詳細で包括的なリストがあります。
すべての主要なメール クライアントでサポートされている CSS 機能とサポートされていない CSS 機能の包括的なリストは、Email Standard Projectで確認できます。
HTML メールを開発するための非常に便利なブートストラップで、矛盾を解消するツールがたくさんあります。これは、HTML Email Bolerplate です。
また、原則として、常にテーブルとすべての旧式の HTML タグ ( align、center、など)valignを使用してください。トピックに関するcolorいくつかの読書。
開始するためのいくつかの投稿を次に示します。
http://css-tricks.com/using-css-in-html-emails-the-real-story/
これは電子メールのCSSチートシートです。http://intenseminimalism.com/2010/email-css-cheatsheet/
Gmail はすでにstylehead 内のタグをサポートしています
CSS セレクターのサブセットを使用して、スタイルを適用できます。Gmail は、クラス、要素、ID セレクターをサポートしています。
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>This text is blue.</p=>
<p>Jerry</p>
</div>
</body>
</html>
そしてメディアクエリ:
標準の CSS メディア クエリを使用して、ユーザーの現在のデバイスに合わせてメールのスタイルを調整できます。Gmail は、画面の幅、向き、解像度に対するクエリをサポートしています。
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
さまざまなメール クライアントでの CSS サポートの表形式を提供する PDF: Web クライアント、さまざまな OS 上のデスクトップ クライアント、およびモバイル メール クライアントに関する情報を提供します。