CSS Counter Style试玩儿

逃离我推掉我的手 2022-08-06 17:06 195阅读 0赞

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

## 强大魔力 ##

使用CSS Counter Style可以做什么，来看看庆哥做的简单案例。当然，如果要发挥最大魔力，需要您的美好创意，这不是哥的特长，就不献丑了，欢迎各位通过留言提交您的创意。  
![这里写图片描述][20150207210604032]  
![这里写图片描述][20150207210720313]  
![这里写图片描述][20150207205800041]  
![这里写图片描述][20150207205811210]  
![这里写图片描述][20150207205830427]  
![这里写图片描述][20150207205842891]  
需要**注意**的是，目前仅有firefox浏览较好的支持@counter-style。我依然把代码放到了codepen，请大家自由选择-[在线研究][Link 1]\-or-[下载收藏][Link 2]\-。  
使用@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 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">命令</th> 
   <th align="left">意义</th> 
   <th align="left">可接受值</th> 
   <th align="left">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">system</td> 
   <td align="left">符号生成算法</td> 
   <td align="left">cyclic 、 numeric 、 alphabetic 、 symbolic 、 additive 、 [fixed ?] 、 [ extends ]</td> 
   <td align="left">symbolic</td> 
  </tr> 
 </tbody> 
</table>

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

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

### 使用范围-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";
    }

## 相关阅读 ##

[w3c 候选标准][w3c]  
[Predefined Counter Styles][]

## 致谢 ##

*前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助。*  
*本文原文链接，[http://blog.csdn.net/whqet/article/details/43605725][http_blog.csdn.net_whqet_article_details_43605725]*  
*欢迎大家访问独立博客[http://whqet.github.io][http_whqet.github.io]*  
*谢谢大家，欢迎拍砖哈！*

[20150207210604032]: /images/20220805/8618dca85a4047d6b7c41f76f19e4375.png
[20150207210720313]: /images/20220805/4bf8c92ebb884f3cbc4b2727b662d0a7.png
[20150207205800041]: /images/20220805/01db117a4b984df7831dce879786618d.png
[20150207205811210]: /images/20220805/1d4e4999276e4400af861f4a8c3590c0.png
[20150207205830427]: /images/20220805/48911d6f5665441d9efc626acfcd5389.png
[20150207205842891]: /images/20220805/d1b4e06fa4bc4f00893136af116dbc61.png
[Link 1]: http://codepen.io/whqet/pen/myqpde?editors=010
[Link 2]: http://codepen.io/whqet/share/zip/myqpde/
[w3c]: http://www.w3.org/TR/2015/CR-css-counter-styles-3-20150203/
[Predefined Counter Styles]: http://www.w3.org/TR/predefined-counter-styles/
[http_blog.csdn.net_whqet_article_details_43605725]: http://blog.csdn.net/whqet/article/details/43605725
[http_whqet.github.io]: http://whqet.github.io