Chromium には最近、HTML5 の新しい機能であるスコープ設定されたスタイルシート（<style scoped>。ウェブ作成者は、スタイルを適用するサブツリーのルート要素の直接の子である <style> 要素に「scoped」属性を設定することで、スタイルルールをページの一部にのみ適用するように制限できます。これにより、スタイルは <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> 内のテキストは緑色になります。
div span
div span
div span
ただし、<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! span!
div! span!
div! span!
もちろん、マークアップ内のどこでも行えます。冒険心がある場合は、マークアップの他のスコープ内にあるスコープ設定されたスタイルをネストして、スタイルを適用する場所をきめ細かく制御できます。
ユースケース
では、この機能はどのような用途に適しているのでしょうか。
一般的なユースケースは、シンジケート コンテンツです。ウェブ作成者がサードパーティのコンテンツ（そのすべてのスタイルを含む）を組み込みたいが、そのスタイルがページの他の関連しない部分を「汚染」するリスクを冒したくない場合に使用します。大きな利点は、yelp、twitter、ebay などの他のサイトのコンテンツを <iframe> を使用して分離したり、外部コンテンツをその場で編集したりすることなく、1 つのページにまとめることができることです。
コンテンツ マネジメント システム（CMS）を使用していて、マークアップのスニペットがすべて最終的なページ表示に統合される場合は、各スニペットがページ上の他の要素から分離してスタイル設定されるようにするには、この機能が便利です。これはウィキにも同様に役立ちます。
ページにデモコードを作成する場合、スタイルをデモ コンテンツに限定するのは簡単です。これにより、デモの CSS を自由に変更しても、ページの他の部分には影響しません。
別のユースケースは単純なカプセル化です。たとえば、ウェブページにサイドメニューがある場合、そのメニューに固有のスタイルを、マークアップのその部分の <style scoped> セクションに配置するのが理にかなっています。これらのスタイルルールは、ページの他の部分のレンダリングには影響しないため、メイン コンテンツとは明確に区別されます。
最も魅力的なユースケースの 1 つは、ウェブ コンポーネント モデルです。ウェブ コンポーネントは、スライダー、メニュー、日付選択ツール、タブ ウィジェットなどの作成に適しています。スコープ設定されたスタイルを指定することで、デザイナーはウィジェットを作成し、スタイルとともにパッケージ化して自己完結型のユニットとして提供できます。他のユーザーは、このユニットを取得してリッチなウェブ アプリケーションに組み合わせることができます。<style scoped> は、ウェブ コンポーネントと Shadow DOM で多用される予定です（これは、chrome://flags で試験運用版の「Shadow DOM」フラグを設定することですでに有効にできます）。現時点では、インライン スタイルなどの不適切な方法に頼らずに、スタイルをウェブ コンポーネントに限定する確実な方法はありません。そのため、スコープ設定されたスタイルはこれに最適です。
親要素を含める理由
最も自然な方法は、親要素を含めて、<style scoped> ルールでスコープ全体に共通の背景色を設定できるようにすることです。また、<style scoped> をまだサポートしていないブラウザに対して、代替として ID またはクラス セレクタでルールを接頭辞に付けることで、スコープ設定されたスタイルシートを「防御的に」記述することもできます。
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
これは、scoped が実装されている場合にスタイルを使用する効果を模倣しますが、セレクタが複雑になるため、実行時のパフォーマンスが低下します。このアプローチの利点は、<style scoped> が広くサポートされ、ID セレクタを簡単に削除できる日が来るまで、正常なフォールバック アプローチを可能にできることです。
ステータス
スコープ設定されたスタイルシートの実装はまだ新しいため、現在は Chrome のランタイム フラグの背後に隠されています。有効にするには、バージョン番号が 19 以上の Chrome バージョン（現時点では Chrome Canary）を入手し、chrome://flags で [Enable <style scoped>] エントリ（最後のほうにあります）を見つけて [Enable] をクリックし、ブラウザを再起動します。
現在、既知のバグはありませんが、@global と @keyframes と @-webkit-region のスコープ付きバージョンはまだ実装中です。また、仕様が変更される可能性が高いため、@font-face は当面無視されます。
この機能にご興味をお持ちの方は、ぜひお試しいただき、ご意見やご感想をお寄せください。