Chromium では最近、HTML5 の新機能であるスコープ スタイルシート、
<style scoped>。ウェブ作成者は、スタイルを適用するサブツリーのルート要素の直接の子である <style> 要素に 'scope' 属性を設定することで、スタイルルールがページの一部にのみ適用されるように制限できます。これにより、スタイルが、<style> 要素の親要素とそのすべての子孫要素のみに適用されるように制限されます。
例
以下に、標準のスタイルを使用した簡単なドキュメントを示します。
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
指定したスタイルルールにより、<div> 内のテキストは赤色、<span> 内のテキストは緑色に色付けされます。
1 つのスパン
1 つのスパン
1 つのスパン
ただし、<style> 要素で scoped を設定した場合は、次のようになります。
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
次に、スタイルルールを制限して、<style scoped> 要素の親である包含 <div> と、その <div> 内のみに適用されるようにします。これを「対象範囲別」と呼び、結果は次のようになります。
クリックします。スパン！
div スパン！
div!スパン！
もちろん、これはマークアップの任意の場所で行えます。必要に応じて、マークアップの他のスコープ部分内にスコープ付きスタイルをネストして、スタイルを適用する場所を詳細に制御できます。
ユースケース
では、これはどのようなメリットがあるのでしょうか。
一般的なユースケースとしてシンジケーション コンテンツがあります。ウェブ作成者は、サードパーティのコンテンツ（そのすべてのスタイルを含む）を組み込もうとしていますが、そのスタイルがページの他の無関係な部分に「汚染」するリスクを回避したい場合があります。この方法の大きなメリットは、yelp、Twitter、ebay など他のサイトのコンテンツを、<iframe> を使用して分離したり、外部コンテンツをその場で編集したりすることなく、1 つのページに結合できることです。
マークアップのスニペットを送信するコンテンツ マネジメント システム（CMS）を使用していて、それらがすべて統合されて最終的なページの表示となるようにしている場合、この機能は、各スニペットをページ上の他の要素とは独立してスタイル設定できる優れた機能です。これは Wiki でも役立ちます。
ページで適切なデモコードを作成したい場合、スタイルをデモ コンテンツのみに制限するのは簡単です。これにより、デモで CSS を思いどおりに操作できますが、ページ上の他の要素には影響しません。
別のユースケースとして、単純なカプセル化があります。たとえば、ウェブページにサイドメニューがある場合、そのメニューに固有のスタイルを、マークアップのその部分の <style scoped> セクションに配置すると合理的です。これらのスタイルルールは、ページの他の部分をレンダリングするときには効果がないので、メイン コンテンツとはうまく分離されます。
おそらく、最も説得力のあるユースケースの 1 つは、ウェブ コンポーネント モデルでしょう。ウェブ コンポーネントは、スライダー、メニュー、日付選択ツール、タブ ウィジェットなどを作成するのに最適な方法です。スコープ スタイルを指定することで、デザイナーはウィジェットを作成し、そのスタイルを独自のユニットとしてパッケージ化して、他のユーザーが取得して組み合わせることができる高機能なウェブ アプリケーションを作成できます。<style scoped> は、ウェブ コンポーネントと Shadow DOM（chrome://flags で試験運用版の「Shadow DOM」フラグを設定することですでに有効にできます）。現時点では、インライン スタイル設定などの不適切な手法に頼らずに、スタイルを Web Components のみに限定する方法はありません。そのため、スコープ付きのスタイルが最適です。
親要素を含める理由
最も自然な方法は、たとえば <style scoped> ルールでスコープ全体に共通の背景色を設定できるように、親要素を含めることです。また、<style scoped> をまだサポートしていないブラウザに対しては、代替手段として ID またはクラスセレクタをルールの先頭に付加することで、スコープが設定されたスタイルシートを「防御的に」記述できます。
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
これは、「scope」が実装されている場合にスタイルを使用する場合の効果を再現しますが、セレクタが複雑であるために実行時のパフォーマンスが損なわれる可能性があります。このアプローチのメリットは、<style scoped> が広くサポートされる日までは適切なフォールバック アプローチが可能であり、ID セレクタを単にドロップできる点です。
ステータス
スコープ スタイルシートの実装はまだ新しいため、現時点では Chrome のランタイム フラグの背後に隠れています。有効にするには、バージョン 19 以降の Chrome（現時点では Chrome Canary）を入手し、chrome://flags の右端にある [<style scoped> を有効にする] エントリを探し、[有効にする] をクリックして、ブラウザを再起動する必要があります。
現時点で既知のバグはありませんが、@global と、範囲指定された @keyframes および @-webkit-region のバージョンは現在実装中です。また、仕様が変更される可能性が高いため、@font-face は当分の間無視されます。
この機能に関心を持たれた方にはぜひお試しいただき、良い点、悪い点、バグの多い点など、ご感想をお聞かせください。