こんにちは、Habr！
この記事では、メーリングリストのブラウザ間およびメール間のレイアウトに関する知識を共有したいと思います。 クロスブローカーという言葉は、すべての電子メールクライアントでのレイアウトの正しい表示を意味します。 このトピックはハブで数回取り上げられたという事実を考慮すると、この記事は非常に関連性が高いと思いますが、ニュアンスの一部は不正確で、他のものは単に時代遅れでした。 このサービスの結果、私は長い間世界中のhtmlメーリングのレイアウトに従事し、次のルールが次のメールクライアントとWebインターフェイスに適用されます
。MSOutlook 2003-2010、mail.ru、rabmlerメール、Yandexメール、Gmail、Yahoo！ メール（クラシック）、Thunderbird 2.0-3.0、Hotmail、Windows Liveメール、Apple Mail 3-4、AOLメール、Lotus Notes 8-8.5。 ベース
ブロックレイアウト？ それを忘れなければなりません。 サブスクライバーの非常に幅広いターゲットオーディエンスを対象としたため、HTML 3.2の最高の伝統に戻りますが、それはほんの少し悪いことです。 この表は、私たちの手紙の「フレーム」として機能します。 「突然！」あなたは言いますか？ しかし、そうです。 テーブルだけでなく、すべてのレイアウト要素に適用される主な機能：テーブル、リスト、段落のすべての外部および内部インデントをゼロにする必要があります-一般に、インデントを持つことができるもの。 なんで？ これは、各メールクライアントが、デフォルトでインデントに含まれる要素について独自のビューを持っているためです。 しかし、悲しいことに、一部のクライアントは
マージンと
パディングを完全に無視し
ます 。 それはビジネスのように思えます-私たちは
頭の中で処方します：
<style> *{ padding:0; margin:0; } </style>
しかし、ここではそれほど単純ではありません。 メーラーの一部の開発者は賢い人であり、カラフルなフリルではなくテキストに文字が必要であることを理解し、単純に上記の構造のスタイルのサポートをオフにしました。 これは、個々の要素ごとにスタイルを
インラインで記述する必要があることを意味します。 そのため、各テーブルは、セルパディングとセルスペーシングの属性を無効にし、テーブルを折りたたむ必要
があります。 段落とリストをゼロにする必要はありません。それらを使用せず、模倣するからです。
インデントをどうするか
不快な画像が現れています-すべてのインデントをリセットしています。 次に何をする？ ここで、blank.gifが私たちの助けになります-同じ単一ピクセルの透明な.gif、おかげでレイアウトを構築します。 これだけでなく、テーブルと再びテーブルを使用する必要があります。 以下は、段落とリストの2列レイアウトの例です。
<table cellpadding="0" cellspacing="0" width="800" align="center" style="border-collapse:collapse;"> <tr> <td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <td> <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;"> <tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> </table> </td> <td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <td> <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;"> <tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> </table> </td> <td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> </tr> </table>
このコードの結果は、2列のテーブルです。 最初の列には、テキストの段落の模倣があり、右側には
ul型のリストの模倣があります。 この例のすべてのインデントは、テーブルセルの高さ/幅を設定することと、透明な単一ピクセルイメージの幅/高さを設定することによって行われます。 この空白は「バックアップ効果」をもたらしますが、そのおかげでレイアウトには何も入りません。
テキストの書式設定
既に述べたように、ファイル全体の共通スタイルは使用されず、個々の要素ごとにデザインを
インラインで設定する必要があります。
フォントタグを完全に忘れる必要があります。 その理由は、大量メール送信の前に、ソースコードがすべての
フォントを
spanに分割し、独自の方法で画像全体に悪影響を与える、陰湿なビジュアルエディタの手に渡る可能性があるという事実にあります。
フォントタグを使用したルールは重要ではありませんが、たとえば大企業ではHTML技術者がコードの設計のみを担当し、その後の大規模サービスのビジュアルエディターが私たちを待っている目的地への旅程は責任を負わないため、ほとんどの場合に必要ですメーリングリスト。
pタグの
style属性を使用してテキストを作成することも非論理的です。これは、段落をシミュレートすることを決定する一方で、段落のインデントをゼロにする必要があるためです。 したがって、スタイリングについては、
spanと
spanのみに責任があり
ます 。
デコレータの スタイル属性で、
font-family 、
font-size 、
colorなどのパラメータを指定します-常に
#xxxxxx形式または実際の形式（たとえば
red）で指定します。 すべてのメーラーが
＃990のような色を適切に認識するわけではありません。そのようなデザインは単に無視されます。
傾斜、スタイルなどは
インラインスタイルで指定できますが、
b 、
i 、
uなどのタグを使用してもエラーにはなりません。
強いと他の-違いはありません。
ハイパーリンク
まず、リンクのフォーマットについて。 個々のリンクは
spanでラップし、そのために必要なすべてのスタイルを示し、同時にリンク自体の
スタイル属性ですべての同じスタイルを複製する必要があります。 リンクはテキストの中央に置くこともできます。冗長にならないように、テキスト内のリンクのデザイン方法の例を示します。
<span style="font-family:Arial; font-size:12px; color:#404040;">Neque porro quisquam est qui</span> <span style="font-family:Arial; font-size:12px; color:#0077c0;"><a style="font-family:Arial; font-size:12px; color:#0077c0;" href="%%url%%">dolorem ipsum quia</a></span> <span style="font-family:Arial; font-size:12px; color:#404040;">dolor sit amet, consectetur, adipisci veli</span>
すべてのリンクについて、
ターゲット属性の
_blank値を設定します。メーラーウィンドウでページを開きませんか？ これはどこでも見られるわけではありませんが、安全にプレイすることをお勧めします。
画像
画像についてはあまり言いませんが、これも重要です。 すべての画像について、幅と高さを実際と同じに設定する必要があります。 これは、
imgタグの
style属性のcssと同様に、
width属性と
height属性を通じて実装できます-違いはありません。 サイズの歪みは許可されません その結果、ほとんどのメーラーにとって悲惨な結果になる可能性があります。
画像がリンクの場合、画像の場合は
imgタグのstylesまたは
border属性で
境界線をゼロにする必要があり、リンク自体の場合は
text-decorationを設定する必要があることに注意してください
。 そうでない場合、画像に下線が引かれることがあります。
背景
色の形式の背景は、文書の本文、表、およびそのセルに対して、フォーマット
#xxxxxxまたは実際には、たとえば
redで指定できます。 この理由は上で説明されています。 写真形式の背景はタブーです。 もちろん鉄ではありませんが、それでも拒否することをお勧めします。 ほとんどのクライアントとインターフェースはこれをサポートしていません。 同じことは、スクリプトだけでなく何かの絶対的な配置にも当てはまります-忘れてください。
まとめ
上記をまとめると、タンバリンと踊るのではなく、細心の注意と忍耐についてではありますが、文字のレイアウトはInternet Explorer 6を愛するすべての人よりも悪いと言えます。 したがって、タイプセットが本当に好きで、単調な作業に煩わされず、注意を怠らず、記事に記載されているルールに従うことなく、購読者は満足します。 幸運を祈ります。ご清聴ありがとうございました！
UPD： このコメントに反論するために、
次の投稿を読むこと
をお勧めします。