Chromium 最近實作了 HTML5 的新功能：範圍限定樣式表單，又稱為<style scoped>。網頁作者可以將「scoped」屬性設在 <style> 元素上，以便限制樣式規則只套用至網頁的一部分。<style> 元素是您要套用樣式的子區塊根元素的直接子項。這會限制樣式只影響 <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> 或即時編輯外部內容來隔離這些內容。
如果您使用內容管理系統 (CMS)，系統會傳送標記片段，並將這些片段合併成最終網頁顯示畫面。這項功能非常實用，可確保每個片段的樣式與網頁上的其他內容分開。這對維基百科也同樣實用。
如要在網頁上編寫精美的範例程式碼，您可以輕鬆將樣式限制在範例內容。這樣一來，您就能盡情使用示範中的 CSS，而不會影響網頁上的其他內容。
另一個用途則是簡單的封裝：舉例來說，如果網頁有側邊選單，建議將該選單專屬的樣式放入標記的 <style scoped> 部分。這些樣式規則在轉譯網頁的其他部分時不會有任何效果，因此可與主要內容清楚區隔！
最吸引人的用途之一，可能是網頁元件模型。網頁元件將是建構滑桿、選單、日期挑選器、分頁小工具等項目的絕佳方式。提供範圍限定的樣式後，設計師就能建構小工具，並將其與樣式一起封裝為獨立單元，供其他人擷取並結合成互動式網頁應用程式。我們打算大量使用 <style scoped> 搭配 Web 元件和 shadow DOM (您可以在 chrome://flags 中設定實驗版「shadow DOM」標記，即可啟用這項功能)。目前沒有任何方法可以確保樣式只適用於 Web 元件，而不必使用內嵌樣式等不良做法，因此範圍限定樣式非常適合這類情況。
為什麼要加入父項元素？
最自然的方式是加入父項元素，讓 <style scoped> 規則可以為整個範圍設定通用的背景顏色。這項功能還可讓您為尚未支援 <style scoped> 的瀏覽器，以「防禦性」方式編寫區域化樣式表單，方法是將 ID 或類別選取器做為備用選項，用於規則前置字串：
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
這會模擬在實作「scoped」時使用樣式的效果，但由於選取器較為複雜，因此會對執行階段效能造成一些影響。這種做法的好處是，在 <style scoped> 廣泛支援且 ID 選取器可輕鬆移除之前，可讓您採用優雅的備用做法。
狀態
由於範圍限定樣式表的實作方式仍屬於新功能，因此目前會在 Chrome 的執行階段標記後方隱藏。如要啟用這些功能，你必須取得版本號碼為 19 以上 (目前為 Chrome Canary) 的 Chrome 版本，然後在 chrome://flags 中找到「Enable <style scoped>」項目 (位於頁面底部)，按一下「Enable」，再重新啟動瀏覽器。
目前沒有已知的錯誤，但 @global 和 @keyframes 和 @-webkit-region 的範圍版本仍在實作中。此外，由於規格很可能會變更，因此目前會忽略 @font-face。
我們鼓勵所有對這項功能感興趣的使用者試用，並告訴我們使用體驗：好、壞和 (可能) 有無錯誤。