HTML5を使用しないスコープ付きスタイルシート

CSSファイルをページの特定の部分にスコープできるアプローチが必要です。理論的には、この例では私が必要なものを行う必要があります。HTML5を使用しないスコープ付きスタイルシート

<html> 
<head> 
</head> 
<body> 

    <div> 
     <style scope> 
      @import url("style1.css"); 
     </style> 
     <div class="testText">Test with Style 1</div> 
    </div> 
    <div> 
     <style scope> 
      @import url("style2.css"); 
     </style> 
     <div class="testText">Test with Style 2</div> 
    </div> 
</body> 
</html>

をしかし、私は、スコープ要素が（Firefoxの主21+）今、いくつかのブラウザでのみ利用可能であることが分かりました。だから、私は怠惰な方法や問題を探しています。私はいくつかのコンテンツを異なるスタイルでサイトに統合する必要があります。私たちは両方のCSSファイルセットを読み込もうとしましたが、両方のスタイルシートに表示されるスタイル名がいくつかありますので、Eclipseでリファクタリングするだけでは済ませられないため、ファイルセットのスタイル名と対応するHTMLコンテンツの名前を変更する作業... :)

このような結果をレンダリングできる他のソリューションは、広く互換性がありますか？

よろしく

出典

2013-06-03 Martin

Chromeはスコープスタイルもサポートしています – gustavohenke

@gustavohenkeデフォルトではないので、Chromeでは使用できないとみなすことができます。 –

Rob Wが正しく、Chromeで実験モードを有効にする必要があります。私が探しているのは、IE8 +とFirefox 17 +で動作する代替のためのものです...いくつかのCSSフレームワークや他のトリックを使用することを意味するならば、ちょうどそこに他の方法があるかどうかを見たいと思っています... – Martin

スコープのスタイルは、この時点では、よくサポートされていないため、あなたはクロスブラウザのカバレッジの任意の並べ替えを期待している場合に問題を引き起こすしようとしています。

あなたが本当に達成できる唯一の方法は、各 'セクション'に固有のクラス名（またはID）を使用し、継承を使用してCSSの名前空間をソートすることです。だから、あなたは、ページの1つの特定のセクションをターゲットとその親にクラス名（例：class="testone"）を得たい場合は、その後、あなたがそのセクションに適用するすべてのスタイルは、そのクラス名が付加されていることを確認してください。

.testone .title{...} 
.testone h1{...} 
.testone a{...

これに失敗した場合は、もあります。これは、ブラウザに依存しないスコープ付きCSSで作業する方法を提供します。私が働いているものではありませんので、提供する経験はありませんが、私が費やした数少ない瞬間から非常に有望です！

このようなJavaScriptベースのソリューションの場合と同様に、JavaScriptを有効にしないでページを読み込む人は、あまり細かいことはしませんので、ページがまだ許容された方法で動作することを確認することが重要です。 JSが無効になっても

出典

2013-06-03 15:04:37 johnkavanagh

OK、アプローチを試して、それが動作し、あなたの応答に追加されます。しかし、これは私が既に持っているすべてのCSSファイルでスタイルの名前を変更する必要があることを意味し、継承することができるので、HTMLの置き換えは簡単です... te継承されたスタイルを非タッチHTMLファイルと後方互換性を持たせる方法はありますか？ – Martin

こんにちはマーティン、それは本当にあなたのサイトがどのように設定されているかに依存します。あなたはあなたのCSSの膨大な数の編集を編集する必要はありません。あなたは通常、サイト全体に適用される「ベース」CSSスタイルのセットを持っていて、上記の宣言を上書きとして使用して、特定の位置/状況に対してスタイルをより具体化します。そうでなければ、私はそれを何もしていないので、経験がないが、利用可能なpolyfillがあります。私は私の答えを更新します。 – johnkavanagh

うわー、jQueryベースのポリフィルは、私たちが必要としているのとまったく同じように思えます。結局のところ、新しいページは新しいスタイルだけを使用し、最終的に古いスタイルを取り除きたいのですが、それは低コストで分けたものを保つ必要があります。 – Martin

HTML5草稿の属性名は、scopeではなくscopedです。

サポートはゆっくりと実装されていますが、属性またはスコープ付きスタイルシートを使用する理由はほとんどありません。ほとんどのブラウザは<style>と単純に<style scoped>をとり、ドキュメント全体に適用します。

したがって、解決しようとしている問題を分析し、別のアプローチを見つけることが最善です。多くの場合、適切なコンテキストセレクタを使用することは自明です。 id属性を要素に割り当て、セレクタの最初のコンポーネントとしてidセレクタを使用します。

出典

2013-06-03 17:43:56

HTML5を使用しないスコープ付きスタイルシート

答えて

関連する問題