2012-10-16 8 views
16

私は最近、私のクライアントのためのニュースレターを開発しています。どのように私は、CSSとHTMLが主要なメールクライアントで使用するのに安全であるかに関する良い情報を見つけることができないように見えます。どのようなhtml/css属性でメールが安全ですか?

ここには知識を持っている人がいて、メジャーなメールクライアントで動作するもののリストを作成できます。

これは、私がキャンペーンモニターから借りた人気のあるメールクライアントのリストです。タグは、属性、特殊な癖がこれらの主要なブラウザである、彼らは簡単にどのように回避することができるもの

Microsoft Outlook 
Apple Mail 
Hotmail 
Yahoo! Mail 
Gmail 

質問です(私は気にいらを忘れた場合は教えてください)。ここで助けを

おかげで、

答えて

6

あなたがサポートと非サポートの包括的なリストを見つけることができますすべての主要電子メールクライアントのCSS機能はEmail Standard Project

本当に不一致のエリミネーターのトンを持っているHTMLメールを開発するための便利なストラップは、HTML Email Bolerplate

されており、一般的なルールとして - いつものテーブルとすべての古い学校のHTMLタグ(aligncentervaligncolorなど)を使用します。いくつかのトピックにreading

8

Campaign Monitorの一般的なメールクライアントには、CSSサポートの詳細なリストがあります。別のメールクライアントでのCSSサポートのためのテーブル形式を提供

http://www.campaignmonitor.com/css/

0

Gmailはすでにあなたがスタイルを適用するCSSセレクタのサブセットを使用することができます頭の中でstyleタグ

をサポートしています。 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> 
関連する問題