2015年2月3日，CSS Counter Style level3成為了W3C的候選標準，是時候來一探究竟，看看強大魔力的@counter-style如何自定義list-style和counter。進來一坐，且聽慶哥分解。
強大魔力
使用CSS Counter Style可以做什么，來看看慶哥做的簡單案例。當然，如果要發(fā)揮最大魔力，需要您的美好創(chuàng)意，這不是哥的特長，就不獻丑了，歡迎各位通過留言提交您的創(chuàng)意。
需要注意的是，目前僅有firefox瀏覽較好的支持@counter-style。我依然把代碼放到了codepen，請大家自由選擇-在線研究-or-下載收藏-。
使用@counter-style命令，我們可以自定義列表樣式，可以用在list-style、counter、counters等上。
結(jié)構(gòu)解析
定義一個counter-style的典型格式如下：
@counter-style counter名字{
system : 算法;
range : 使用范圍;
symbols : 符號; or additive-symbols: 符號
prefix : 前綴;
suffix : 后綴;
pad : 補零(eg. 01,02,03);
negative: 負數(shù)策略;
fallback: 出錯后的默認值;
speakas : 語音策略;
}
上面詳細列出了@counter-style的所有命令，大部分情況下，我們只需要使用其中幾個命令即可，例如實現(xiàn)“天干編號”的命令如下。
@counter-style cjk-heavenly-stem {
system: alphabetic;
symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";
/* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */
suffix: "、";
}
接下來我們來簡要看看各個命令的用法。
算法-system
| 命令 | 意義 | 可接受值 | 默認值 |
|---|---|---|---|
| system | 符號生成算法 | cyclic 、 numeric 、 alphabetic 、 symbolic 、 additive 、 [fixed <integer>?] 、 [ extends <counter-style-name> ] | symbolic |
算法詳細解釋如下表所說。
| 參數(shù) | 意義 | 示例代碼 | 表現(xiàn)方式 |
|---|---|---|---|
| cyclic | 循環(huán)使用符號 | system: cyclic; symbols:'a' 'b' 'c'; | a,b,c,a,b,c,a |
| fixed | 只用一遍符號，數(shù)字表示開始使用的位置 | system: fixed 3; symbols:'a' 'b' 'c' 'd'; | 1,2,a,b,c,d,7 |
| symbolic | 循環(huán)使用符號，第二遍雙倍重復(fù) | system:symbolic; symbols:'a' 'b' 'c'; | a,b,c,aa,bb,cc,aaa |
| alphabetic | 類似于小寫字母循環(huán) | system:alphabetic; symbols:'a' 'b' 'c'; | a,b,c,aa,ab,ac,ba |
| numeric | 類似于數(shù)字進制 | system:alphabetic; symbols:'a' 'b' 'c'; | b,c,c,ba,bb,bc,ca,cb |
| additive | 類似于羅馬數(shù)字的編號系統(tǒng) | system:additive; additive-symbols: c 3, b 2, a 1; | a,b,c,ca,cb,cc,cca |
| extends | 繼承其他編號系統(tǒng) | system: extends decimal; suffix: ') '; | 1),2),3),4),5),6),7) |
使用范圍-range
指定自定義符號系統(tǒng)的使用范圍，超出范圍外的將采用fallback指定的默認編號。
可以使用[ [ <integer> | infinite ]{2} ]或 auto兩種形式指定range范圍，auto為默認值。
auto在不同system下的含義如下列表所示：
- 在cyclic、numeric、fixed算法下，auto表示從負無窮到正無窮
- 在alphabetic、symbolic算法下，auto表示從1到正無窮
- additive算法下，auto表示從0到正無窮
- extend算法下，auto取繼承的父系統(tǒng)的取值范圍，如果為預(yù)定義的復(fù)雜系統(tǒng)，取預(yù)定義的取值
下面的示例都是正確的范圍指定。
/*指定范圍為auto，默認值*/
range: auto;
/*指定范圍為兩個數(shù)字：前面表示下限，后面表示上限，兩個數(shù)字都包含在內(nèi),列表之間用逗號隔開*/
range: 1 6;
range: 1 2,4 6;
/*指定范圍為關(guān)鍵字*/
range: infinite; /*從負無窮到正無窮*/
range: infinite 4; /*從負無窮到4*/
range: -6 infinite;/*從-6到正無窮*/
使用符號-symbols和additive-symbols
這是自定義counter-style中非常重要的屬性，在 cyclic、numeric、alphabetic、symbolic、fixed等算法中必須指定symbols屬性，在additive算法中必須指定additive-symbols。
使用前后綴-prefix和suffix
prefix的默認自為“ ”，suffix的默認值為"\2E\20"，一個點加一個空格。
使用補零策略-pad
pad可以讓開發(fā)者指定固定寬度的符號系統(tǒng)，例如三位的數(shù)字系統(tǒng)，001, 002，……，100, 101等。
pad指定的格式為 pad <integer> && <symbol>，例如 pad 3 "0"等。
匿名counter-style-symbols()函數(shù)
symblos函數(shù)將創(chuàng)建一個沒有名字，prefix為""，suffix為" "，range為auto，fallback為decimal，negative為"\2d"（-）， pad為0 ""，speak-as為auto的匿名style。也即我們只需要在匿名counter-style中指定system和symbols即可。
ol { list-style: symbols(cyclic "a" "b" "c" "d"); }
預(yù)定義style
CSS Counter Styles Level 3預(yù)定了很多不錯的符號系統(tǒng)，例如針對中國用戶的天干、地支、中文數(shù)字、中文大寫等符號系統(tǒng)。這些預(yù)定義的系統(tǒng)，使我們學習counter-style的不錯資源，下面我們就來看幾個。
/*兩位數(shù)字編號-01,02,03……10,11*/
@counter-style decimal-leading-zero {
system: extends decimal;
pad: 2 '0';
}
/*中文數(shù)字編號*/
@counter-style cjk-decimal {
system: numeric;
range: 0 infinite;
symbols: \3007 \4E00 \4E8C \4E09 \56DB \4E94 \516D \4E03 \516B \4E5D;
/* 〇 一 二 三 四 五 六 七 八 九 */
suffix: "\3001";
/* "、" */
}
/*天干編號*/
@counter-style cjk-heavenly-stem {
system: alphabetic;
symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";
/* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */
suffix: "、";
}
/*地支編號*/
@counter-style cjk-earthly-branch {
system: alphabetic;
symbols: "\5B50" "\4E11" "\5BC5" "\536F" "\8FB0" "\5DF3" "\5348" "\672A" "\7533" "\9149" "\620C" "\4EA5";
/* 子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥 */
suffix: "、";
}
/*中文大寫編號-壹仟壹佰壹拾壹*/
@counter-style simp-chinese-formal {
/* this is a predefined complex style in the CSS3 Counter Styles specification */
system: additive;
range: -9999 9999;
additive-symbols: 9000 \7396\4EDF, 8000 \634c\4EDF, 7000 \67d2\4EDF, 6000 \9646\4EDF, 5000 \4f0d\4EDF, 4000 \8086\4EDF, 3000 \53C1\4EDF, 2000 \8CB3\4EDF, 1000 \58F9\4EDF, 900 \7396\4F70, 800 \634C\4F70, 700 \67D2\4F70, 600 \9646\4F70, 500 \4f0d\4F70, 400 \56DB\4F70, 300 \53C1\4F70, 200 \8CB3\4F70, 100 \58F9\4F70, 90 \7396\62FE, 80 \634C\62FE, 70 \67D2\62FE, 60 \9646\62FE, 50 \4f0d\62FE, 40 \8086\62FE, 30 \53C1\62FE, 20 \8CB3\62FE, 10 \58F9\62FE, 9 \7396, 8 \634C, 7 \67D2, 6 \9646, 5 \4f0d, 4 \8086, 3 \53C1, 2 \8CB3, 1 \58F9, 0 \96F6;
suffix:'、 ';
negative: "\8D1F";
}
相關(guān)閱讀
w3c 候選標準
Predefined Counter Styles
致謝
前端開發(fā)whqet，關(guān)注前端開發(fā)，分享相關(guān)資源。csdn專家博客，王海慶希望能對您有所幫助。
本文原文鏈接，http://blog.csdn.net/whqet/article/details/43605725
歡迎大家訪問獨立博客http://whqet.github.io
謝謝大家，歡迎拍磚哈！
