CSS Counter Style试玩儿

2015年2月3日，CSS Counter Style level3成为了W3C的候选标准，是时候来一探究竟，看看强大魔力的@counter-style如何自定义list-style和counter。进来一坐，且听庆哥分解。

强大魔力

使用CSS Counter Style可以做什么，来看看庆哥做的简单案例。当然，如果要发挥最大魔力，需要您的美好创意，这不是哥的特长，就不献丑了，欢迎各位通过留言提交您的创意。

需要注意的是，目前仅有firefox浏览较好的支持@counter-style。我依然把代码放到了codepen，请大家自由选择-在线研究-or-下载收藏-。

使用@counter-style命令，我们可以自定义列表样式，可以用在list-style、counter、counters等上。

结构解析

定义一个counter-style的典型格式如下：

@counter-style counter名字{

	 system  : 算法;

	 range   : 使用范围;

	 symbols : 符号; or additive-symbols: 符号

	 prefix  : 前缀;

	 suffix  : 后缀;

	 pad     : 补零(eg. 01,02,03);

	 negative: 负数策略;

	 fallback: 出错后的默认值;

	 speakas : 语音策略;

}

上面详细列出了@counter-style的所有命令，大部分情况下，我们只需要使用其中几个命令即可，例如实现“天干编号”的命令如下。

@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 ?] 、 [ extends ]	symbolic

算法详细解释如下表所说。

参数	意义	示例代码	表现方式
cyclic	循环使用符号	system: cyclic; symbols:'a' 'b' 'c';	a,b,c,a,b,c,a
fixed	只用一遍符号，数字表示开始使用的位置	system: fixed 3; symbols:'a' 'b' 'c' 'd';	1,2,a,b,c,d,7
symbolic	循环使用符号，第二遍双倍重复	system:symbolic; symbols:'a' 'b' 'c';	a,b,c,aa,bb,cc,aaa
alphabetic	类似于小写字母循环	system:alphabetic; symbols:'a' 'b' 'c';	a,b,c,aa,ab,ac,ba
numeric	类似于数字进制	system:alphabetic; symbols:'a' 'b' 'c';	b,c,c,ba,bb,bc,ca,cb
additive	类似于罗马数字的编号系统	system:additive; additive-symbols: c 3, b 2, a 1;	a,b,c,ca,cb,cc,cca
extends	继承其他编号系统	system: extends decimal; suffix: ') ';	1),2),3),4),5),6),7)

使用范围-range

指定自定义符号系统的使用范围，超出范围外的将采用fallback指定的默认编号。

可以使用[ [ | infinite ]{2} ]或 auto两种形式指定range范围，auto为默认值。

auto在不同system下的含义如下列表所示：

在cyclic、numeric、fixed算法下，auto表示从负无穷到正无穷
在alphabetic、symbolic算法下，auto表示从1到正无穷
additive算法下，auto表示从0到正无穷
extend算法下，auto取继承的父系统的取值范围，如果为预定义的复杂系统，取预定义的取值

下面的示例都是正确的范围指定。

/*指定范围为auto，默认值*/

range: auto;

/*指定范围为两个数字：前面表示下限，后面表示上限，两个数字都包含在内,列表之间用逗号隔开*/

range: 1 6;

range: 1 2,4 6;

/*指定范围为关键字*/

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可以让开发者指定固定宽度的符号系统，例如三位的数字系统，001, 002，……，100, 101等。

pad指定的格式为 pad && ，例如 pad 3 "0"等。

匿名counter-style-symbols()函数

symblos函数将创建一个没有名字，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"); }

预定义style

CSS Counter Styles Level 3预定了很多不错的符号系统，例如针对中国用户的天干、地支、中文数字、中文大写等符号系统。这些预定义的系统，使我们学习counter-style的不错资源，下面我们就来看几个。

/*两位数字编号-01,02,03……10,11*/

@counter-style decimal-leading-zero {

  system: extends decimal;

  pad: 2 '0';

}

/*中文数字编号*/

@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";

}

致谢

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助。

本文原文链接，http://blog.csdn.net/whqet/article/details/43605725

欢迎大家访问独立博客http://whqet.github.io