encapsulate css

私はレポートを作成しています。報告書の中で、私は別のプロバイダから電子メールをレンダリングする必要があります。この電子メールは独自のCSS（通常はインラインCSSですが、私は通常、CSSをカプセル化するためにiframeを使用しているので、私は壊れませんが、今は使用できません。encapsulate css

iframeを使用せずにCSSをカプセル化する方法はありますか？

<html> 
    <head> 
    <style> 
     // I enclose it to content so it doesn't override the email css 
     #my_content table, #my_content p { 
     color: black; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='my_content'> 
     ... some stuff ... 
    <div id='email'> 
     <html> 
      <head> 
      <style> 
       table { 
       margin-left: 100cm; // screws up all my tables 
       } 
       .... some styles that should only apply inside the email div ... 
      </style> 
      </head> 
      <body> 
      .... email content ... 
      </body> 
     </html> 
     </div> 
    </div> 
    </body> 
</html>

を私はHTML構造を抽出し、本体だけで何を得るが、その後はないすべての私の電子メールは、それが必要となりますことができます：ここ

は私が午前問題の一例です。また、htmlは有効なものでなければなりません。

出典

2012-08-28 Hassek

あなたはクラスを使用していませんか？ – ChaosPandion

はい！ 'scoped'属性を使います。私はそれがどこでもまだサポートされているとは思わない。（Chromeでは 'chrome：// flags'でGoogle Chromeを有効にすることができます） – Ryan

私はクラスを使用して、メールがどのように私のCSSを壊しているのかという質問をよりうまく説明しましょう – Hassek

自分のクラス名との衝突のために電子メールのCSS部分をチェックすることができます。彼らは唯一のあなたのdivに適用すること、 Listing known CSS classes using Javascript

出典

2012-08-28 20:15:49 Andre

これが終わったら、彼は何をやろうとしているのですか？ –

私はこれらの衝突を若干修正された識別子で置き換えることができるかもしれませんが、単純にhaykのようなCSSを使うのは簡単ではありません。マート – Andre

あなたのCSSセレクタに#emailを付加することができます私はちょうどあなたのために役立つことができ、この記事を見つけました。

例えば、

.classname { display: block }

#email .classname { display: block }

にある[編集]を変更します。あなたは、電子メールのCSSを制御することはできません場合はarxanasとして、 LESSの使用を検討することを提案。 lessは、CSSセレクタのネストを可能にするCSSプリプロセッサです。あなたがless.jsを含める場合は、このような何かを行うことができます。

#email { 
    CSS goes here 
}

less.jsはこれを解析し、CSSに変換します。

出典

2012-08-28 20:16:04

私は問題は、スタイルがロードされており、彼はそれらを制御できないと考えています。 –

説明のためのarxanasに感謝します。私はこのシーンに対して提案を追加しましたo。 –

私は電子メールの一部であるため、CSSを制御できません – Hassek

答えて

関連する問題