新的實驗功能 - 範圍樣式表

Alex Danilo

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、Titter、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 版本 (目前 Chrome Canary),然後在 chrome://flags 中找到「啟用 <style scoped>」項目 (在最後面),按一下 [啟用],然後重新啟動瀏覽器。

目前沒有已知的錯誤,但 @global 以及 @keyframes@-webkit-region 的特定範圍版本,目前仍在實作中。此外,由於規格很有可能變更,目前系統會忽略 @font-face

我們想鼓勵所有想使用這項功能的使用者試用這項功能,並分享你的使用體驗:好壞、壞事 (也可能)。