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> の緑のテキストに色を付けることができます。
diva! スパン！
diva! スパン！
diva! スパン！
ただし、<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: スパン！
div: スパン！
もちろん、これはマークアップ内の任意の場所に行うことができます。したがって、いろいろ試してみたい場合は、スタイルを適用する場所を詳細に制御するために、マークアップの他のスコープ部分内にスコープのスタイルをネストできます。
ユースケース
これは何の役に立つのでしょうか？
一般的な使用例は、シンジケーション コンテンツです。ウェブ作成者は、サードパーティのコンテンツ（そのすべてのスタイルを含む）を取り込んだいものの、そのスタイルがページの無関係な部分に「汚染」されるリスクを負わせたくない場合です。ここでの大きな利点は、yelp、twitter、ebay などの他のサイトのコンテンツを、<iframe> を使用して、または外部コンテンツをその場で編集することなく、1 つのページに統合できることです。
最終的なページに表示するマークアップのスニペットを送信するコンテンツ管理システム（CMS）を使用している場合、この機能は、ページ上の他の要素から各スニペットを独立してスタイル設定するための優れた機能です。これは Wiki でも同様に役立ちます。
優れたデモコードをページ上に作成する場合、スタイルをデモ コンテンツのみに制限するのは簡単です。これにより、デモの CSS を大胆に操作できますが、ページ上の他のものは影響を受けません。
別のユースケースとしては、単純なカプセル化があります。たとえば、ウェブページにサイドメニューがある場合、そのメニューに固有のスタイルを、マークアップの該当部分の <style scoped> セクションに記述するのが合理的です。これらのスタイルルールは、ページの他の部分をレンダリングするときに効果がないため、メイン コンテンツと明確に分離しています。
最も説得力のあるユースケースの一つは、ウェブ コンポーネント モデルでしょう。ウェブ コンポーネントは、スライダー、メニュー、日付選択ツール、タブ ウィジェットなどを構築する優れた方法になるでしょう。デザイナーは、スコープ付きスタイルを提供することで、ウィジェットを作成し、他のユーザーが入手してリッチなウェブ アプリケーションに統合できる自己完結型のユニットとしてウィジェットを作成し、そのスタイルとともにパッケージ化できます。ウェブ コンポーネントと Shadow DOM（chrome://flags で試験運用版の「Shadow DOM」フラグを設定することですでに有効にできます）では、<style scoped> を頻繁に使用する予定です。現時点では、インライン スタイル設定などの不適切なプラクティスに頼らずにスタイルが Web Components に限定されるようにする優れた方法はありません。スコープを指定されたスタイルがこれにぴったりです。
親要素を含める理由
たとえば、<style scoped> ルールによってスコープ全体に共通の背景色を設定できるように、親要素を含めるのが最も自然な方法です。また、代替手段として ID またはクラスセレクタをルールの先頭に付加することにより、<style scoped> にまだ対応していないブラウザに対しても、スコープ スタイルシートを「防御的に」記述できます。
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
これは、「scope」が実装されているときにスタイルを使用した場合の効果を模倣していますが、セレクタがより複雑なため、実行時のパフォーマンスが低下します。このアプローチの長所は、<style scoped> が広くサポートされる日までグレースフル フォールバック アプローチが可能であり、ID セレクタを単に破棄できることです。
ステータス
スコープが指定されたスタイルシートの実装はまだ新しいため、現在は Chrome の実行時フラグで非表示になっています。有効にするには、Chrome のバージョンが 19 以降（現時点では Chrome Canary）を入手し、chrome://flags の末尾にある [<style scoped> を有効にする] エントリを見つけて [有効にする] をクリックし、ブラウザを再起動する必要があります。
現在、既知のバグはありませんが、@global、および @keyframes と @-webkit-region のスコープ対象バージョンについては、まだ実装中です。また、@font-face は仕様が変更される可能性が高いため、当面無視されます。
この機能に関心をお持ちの皆様には、ぜひお試しいただき、良い点、悪い点、（場合によっては）バグがある点など、体験談をお聞かせください。