|
原文：Writing Efficient CSS for use in the Mozilla UI
譯文：在 Mozilla UI 中書(shū)寫(xiě)高效率 CSS
以下文檔描述了應(yīng)用在 Mozilla UI 中優(yōu)化 CSS 文件的規(guī)則。第一部分是對(duì)于 Mozilla 樣式系統(tǒng)分類規(guī)則的一般性討論。在了解這個(gè)系統(tǒng)的基礎(chǔ)上，后續(xù)部分包含了一些指南，書(shū)寫(xiě)可以利用這個(gè)樣式系統(tǒng)實(shí)踐優(yōu)點(diǎn)的樣式的指南。
樣式系統(tǒng)如何分類規(guī)則
樣式系統(tǒng)把規(guī)則分為四大類。理解這些類是很重要的，因?yàn)閷?duì)于規(guī)則的匹配來(lái)說(shuō)他們是首先要考慮的。之后的段落中會(huì)使用“主選擇符”這個(gè)說(shuō)法。主選擇符是指選擇符最右邊的部分(最終要匹配的那個(gè)元素，而不是它的祖先元素)。例如，在以下規(guī)則中：
a img, div > p, h1 + [title] {}
主選擇符是 “img”, “p”, 和 “[title]“。
ID 規(guī)則
ID 選擇符作為主選擇符的規(guī)則。
例如：
- button#backButton { } /* ID 類別的規(guī)則 */
- #urlBar[type="autocomplete"] { } /* ID 類別的規(guī)則 */
- treeitem > treerow > treecell#myCell:active { } /* ID 類別的規(guī)則 */
Class 規(guī)則
如果一條規(guī)則有一個(gè)指定的 class 作為主選擇符，就被歸入此類。
例如：
- button.toolbarButton { } /* 基于 class 的規(guī)則 */
- .fancyText { } /* 基于 class 的規(guī)則 */
- menuitem > .menu-left[checked="true"] { } /* 基于 class 的規(guī)則 */
Tag 規(guī)則
如果主選擇符不是 ID 或者 class，那么下一個(gè)類很可能就是 tag 分類。如果一條規(guī)則指定 tag 為主選擇符，就被歸入此類。
例如：
- td { } /* 基于 tag 的規(guī)則 */
- treeitem > treerow { } /* 基于 tag 的規(guī)則 */
- input[type="checkbox"] { } /* 基于 tag 的規(guī)則 */
全局規(guī)則
除以上分類之外都?xì)w入此類。
例如：
- [hidden="true"] { } /* 全局規(guī)則 */
- *{} /* 全局規(guī)則 */
- tree > [collapsed="true"] { } /* 全局規(guī)則 */
樣式系統(tǒng)如何匹配規(guī)則
樣式系統(tǒng)從最右邊的選擇符開(kāi)始向左側(cè)移動(dòng)來(lái)匹配一條規(guī)則。樣式系統(tǒng)會(huì)一直向左匹配選擇符直到規(guī)則匹配完畢或者由于出錯(cuò)停止匹配。
對(duì)于規(guī)則分類的第一步發(fā)生在主選擇符類別基礎(chǔ)上。這個(gè)分類的目的是把那些不需要浪費(fèi)時(shí)間匹配的規(guī)則過(guò)濾出來(lái)。這是顯著提升性能的重點(diǎn)。對(duì)于一個(gè)給定的需要匹配的元素，規(guī)則越少，樣式的渲染越快。例如，元素有一個(gè) ID，那么只有和元素 ID 匹配的 ID 規(guī)則會(huì)被檢索。只有和元素的 class 匹配的 class 規(guī)則會(huì)被檢索。只有和 tag 匹配的 tag 規(guī)則會(huì)被檢索。全局規(guī)則總是會(huì)被檢索。
出處：
責(zé)任編輯：moby
上一頁(yè) 下一頁(yè) 在 Mozilla UI 中書(shū)寫(xiě)高效率 CSS [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 在 Mozilla UI 中書(shū)寫(xiě)高效率 CSS [1]
第 2 頁(yè) 
