送信前にメールのプレビューを表示できる大量メール送信システムを構築しています。jquery を使用して、電子メールの HTML をプレビュー ボックスにレンダリングします。$().html(theHtml).
HTML メールは、スタイルにすべてインライン CSS を使用します。HTML を入力すると、CSS の一部が上書きされます。
これが起こらないようにするための解決策を探しています。ドキュメント全体に影響を与えないように、電子メールのhtml/cssを自己封じ込める方法はありますか?
スタイルに !important を追加するとうまくいくことは理解していますが、これはあまりスケーラブルなオプションではありません。
前もって感謝します。
残念ながら、インライン スタイルをオーバーライドする唯一の方法は !important です。
ただし、ID やクラスなどを使用してすべての「ラッパー」CSS (HTML 電子メール プレビューではなく、ページの CSS など) をより具体的にすることで、それらのスタイルが上書きされないようにすることで回避できる場合があります。 HTML 電子メールに埋め込まれた一般的なスタイル宣言。
私は少し混乱しています - 「インライン」スタイル (style="your css here" 属性を持つ要素のように) または埋め込み CSS (たとえば "your css here") をオーバーライドしようとしていますか? 後者の場合は、独自の CSS で重要なものをより具体的にしてください。
特異性に関する詳細情報: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Sanderが提案したようにiframeを使用することは、CSSの特異性ルールを再構築しようとするよりも簡単な解決策かもしれません.
CSS に疑似名前空間を使用することを強くお勧めします。
<div class='foo'>基本的に、インライン化されたサードパーティ コンテンツに含まれない任意のプレフィックスを CSS に追加します。<div class='myapp-foo'>
最近私たちのプロジェクトでこのプラクティスを使用したところ、もう少し規律が必要なだけで、他のコンテンツを埋め込むためのアプリの管理が容易になりました。
ウェブサイトとメールに同じclass/名前を使用していますか? idこれは当てはまりません。