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> 內，為文字加上顏色：
還有一個跳舞！
變身！
變身！
變身！
變身！ 範圍更大！
不過，如果在 <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>
它會限制樣式規則，使其套用至封閉的 <div> (即 <style scoped> 元素的父項，以及該 <div> 中的任何內容)。我們稱之為「範圍」，結果如下所示：
一個個潛水！是跨步！
還有 個橫跨！
潛水！很跨！
這當然可以在標記的任何地方完成。如果喜歡上手，您可以在標記其他範圍部分建立巢狀範圍樣式，不限程度，還可以精確控制樣式套用位置。
用途
以下何者能派上用場？
聯合發布內容常見用途是：當您是網頁作者時，想要整合第三方的內容 (包括所有樣式)，但不希望這些樣式「粗糙」網頁上的其他不相關部分時。這種做法的一大優點是，您可以將 yelp、Twitter 和 ebay 等其他網站的內容合併成單一頁面，不必使用 <iframe> 或即時編輯外部內容。
如果您使用的內容管理系統 (CMS) 將標記的程式碼片段全都混在一起成網頁顯示的最終版網頁，就很適合使用這項便利功能，確保每個程式碼片段都能與網頁上的其他內容區隔開來。這點也適用於維基。
想要在網頁上編寫良好的示範程式碼時，可以輕鬆將樣式限制在示範內容內。這可讓你和示範中的 CSS 一臂之力，但頁面上的其他內容都不會受到影響。
另一個用途就是封裝：例如，如果網頁有側邊選單，可將該選單專屬的樣式放入標記該部分的 <style scoped> 區段。在轉譯網頁的其他部分時，這些樣式規則不會有任何效果，因為它們會與主要內容緊密區隔！
最吸引人的應用實例之一可能是網頁元件模型。網頁元件是建立滑桿、選單、日期挑選器、分頁小工具等項目的絕佳方式。只要提供範圍樣式，設計人員就能建立小工具，並將其樣式與樣式組合成獨立單元，供其他人擷取並結合成豐富的網頁應用程式。我們打算大量將 <style scoped> 與網頁元件和 shadow DOM 搭配使用 (透過在 chrome://flags 設定實驗性「shadow DOM」旗標的方式啟用)。如果想確保樣式只侷限於網頁元件，就沒有採用內嵌樣式等錯誤做法的做法，因此範圍樣式就是最適合這種做法。
為什麼要加入父項元素？
最自然的做法是加入父項元素，讓 <style scoped> 規則能夠為整個範圍設定通用背景顏色。此外，這項功能還可為尚未支援 <style scoped> 的瀏覽器「強制」撰寫範圍樣式表，方法是在規則前方加上 ID 或類別選取器做為備用：
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
這可模擬在實作「範圍」時使用樣式的效果，但由於選取器較為複雜，因此也會對執行階段效能產生負面影響。這個方法的一大優點是，在廣泛支援 <style scoped> 且 ID 選取器可以輕鬆捨棄的那一天之前，提供優雅的備用方法。
狀態
由於範圍樣式表的實作仍為新內容，因此目前在 Chrome 的執行階段旗標之後隱藏。如要啟用這項功能，您需要先取得版本為 19 以上 (目前為 Chrome Canary) 的 Chrome 版本，然後在 chrome://flags 中找出「啟用 <style scoped>」項目 (位於結尾處)，按一下「啟用」，然後重新啟動瀏覽器。
目前沒有已知的錯誤，但 @global 和 @keyframes 和 @-webkit-region 的限定範圍版本仍在實作中。此外，由於規格很有可能變更，因此系統會暫時忽略 @font-face。
我們希望鼓勵所有有興趣試用這項功能的人，並告訴我們您的使用體驗：錯誤、不好或 (或許) 錯誤。