HTML5新特性：范圍樣式 · Web前端-關注HTML5與CSS3

? ? ? 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>變成綠色： a div!?a span! a div!?a span! a div!?a 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>元素及其內部的所有元素上。我們稱之為“范圍”，結果如下所示： a div! a span! a div!?a span! a div! a span! ? ? ??當然我們可以在任何地方使用這個標簽。?所以如果你喜歡冒險，你可以在一個范圍樣式內添加盡可能多的范圍樣式來獲取盡可能細的樣式控制粒度。 **用途** ? ? ??它有什么好處？ ? ? ??一種常見的用途是內容合并：當你作為一個網站的作者想嵌入來自第三方的內容（譯者注：想想博客），包括它所有的樣式風格，但是不想讓這些樣式“污染”頁面其他無關的部分。其一個巨大的優勢是可以將其他網站例如Yelp、Twitter、Ebay等的內容合并到一個單獨頁面，而無需使用<iframe>或者動態的編輯外部內容來隔離它們。 ? ? ??如果你使用內容管理系統（CMS），它會發送許多標記片段來整合成為一個最終顯示的頁面。所以范圍樣式是一個偉大的功能，可以確保每一個片段與任何其他頁面上的樣式相隔離。這對wiki來說也一樣的有用。 ? ? ??當你想在頁面上展示一些漂亮的演示代碼，很容易限制樣式只作用于演示內容。你可以在演示隨意的添加樣式，而不用擔心對頁面上其他內容的影響。 ? ? ??它的另一個用途是簡單的封裝：例如，如果你的網頁有一個側邊菜單，把指向菜單的樣式封裝到其中的<style scoped>段落會很有意義。這些樣式規則對頁面其他區域的渲染將不會有任何影響，這可以使得它可以很好地和主要內容進行分離！ ? ? ??它可能最引人注目的用途之一是用在[Web組件](http://translate.googleusercontent.com/translate_c?act=url&hl=zh-CN&ie=UTF8&prev=_t&rurl=translate.google.com.hk&sl=en&tl=zh-CN&u=http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html&usg=ALkJrhgTnofhqhYUvflMbbMgrds2IePEKA)模型上。Web組件將是一個構建像滑塊、菜單、日期選擇器和選項卡部件等的偉大方式。通過提供范圍內的樣式，設計人員可以構建一個組件并且將其打包成為一個獨立的單位，其他人可以使用這個組件并組合為一個富Web應用程序。?我們計劃在Web組件和[shadowDOM](http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html)（已經可以在chrome://flags里開啟實驗性的“Shadow DOM”標志來啟用）里大量使用范圍樣式。除了例如內聯樣式這樣不好的方式，現在沒有真正的好辦法來確保樣式限制在Web組件里，所以范圍樣式是一個完美的解決方案。 **為什么包括父元素？** ? ? ??最自然的方式需要包括父元素，以便于<style scoped>規則可以來做為整個區域設置通用背景顏色這樣類似的事情。它還允許采用“防守性”的方式來書寫范圍樣式，通過為ID或者類選擇器加上前綴的方式為還不支持<style scoped>的瀏覽器提供優雅降級。 ~~~ <div id=”menu”> ~~~ ~~~ ?<style scoped> ~~~ ~~~ ?? #menu .main { … } ~~~ ~~~ ?? #menu .sub { … } ~~~ … ? ? ??這種模仿可以實現“范圍樣式”的效果，但是因為更復雜的選擇器會有一些運行時的性能損失。這種做法的好處是，它采用一個優雅的降級方法讓我們可以等到<style scoped>被廣泛支持和ID選擇器可以簡單地被丟棄時。 **狀態** ? ? ??鑒于范圍樣式的實現是最新的，它目前被隱藏在Chrome的運行時標志里。要激活它，你需要下載版本號為19或者更高的Chrome（現在的Chrome Canary），然后在chrome://flags里找到“開啟<stylescoped>”選項（靠近最后），單擊“啟用”，然后重新啟動瀏覽器。 ? ? ??目前沒有已知bug，但是@keyframes和@-webkit-region區域范圍的版本還正在實現中。此外，@font-face被忽略掉了，因為現在有一個很好的機會來調整這個規范。 ? ? ??我們鼓勵每個對這個特性感興趣的人都來嘗試一下，讓我們知道你的反饋：好、不好以及（可能）不足。譯自：[http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped](http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped) 轉載請注明：[蔣宇捷的博客](http://blog.csdn.net/hfahe)