サイト用の HTML エディターを構築しています。ユーザーが入力したばかりの HTML が宛先サイトでどのように表示されるかをプレビューする必要があるため、そのサイトのスタイルシートを読み込む必要がありますが、それらのスタイルシートが Div 内のコンテンツに影響を与えるだけにしたいと考えています。
スタイルシートを編集して、その div に固有のものにするアクセス権がありません。
したがって、私のコードは次のように動作する必要があります。
<div style="/styles/public1.css">
New HTML
</div>
div の外でスタイルシートを読み込むことはできますが、それは自分のサイトのスタイルシートを上書きするので、よくありません。
div 内のコンテンツだけを有効にするためにスタイルシートを隔離する方法はありますか?
'style' 属性をファイルの場所に指定してスタイルシートをロードすることはできません。詳細については、 W3C のドキュメントを参照してください。
おそらく、目的のために「iframe」を使用したいと思うでしょう。編集中の HTML ドキュメントを <iframe> で指定するだけです。通常の Web ページと同様に、任意のスタイルシートを適用できます。
残念ながら、これは不可能です。十分な回避策は、すべてのスタイルにセレクターをプレフィックスとして付けることです。たとえば、
#destination body { /* */ }
#destination li { /* */ }
/* etc. */
また、CSS3 には、「スコープ」CSS と呼ばれるまだブラウザーで広くサポートされていない気の利いた機能があります。これは、親要素とその子に対してのみ、要素内で定義された CSS です。
<div>
<style scoped>
p { font-weight: bold; }
</style>
<p>Bold text</p>
</div>
<p>Normal text</p>
または、要素を使用して Web ページ内に Web ページをロードすることもできます<iframe>。
<iframe src="http://www.google.com"></iframe>