计数器样式 | @counter-style

@counter-style

@counter-style是一个CSSat-rule ，它让开发者可以自定义counter的样式。 一个 @counter-style规则 定义了如何把一个计数器的值转化为字符串表示。

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul {
   list-style: thumbs;
}

最初版的CSS定义了一系列很好用的计数器样式， 尽管近几年又添加了很多样式，但是这种限制方式被证明已经不能满足全球化的排版了。@counter-style规则用一种开放的方式弥补了这一缺点，在预定义的样式不能满足需求时，它可以使开发者自定义他们自己的计数器样式。

语法

描述

每个 @counter-style 由一个名称标识并具有一组描述符。

system指定一个算法，用于将计数器的整数值转化为字符串表示。

下面的@counter-style规则使用图片而不是字符标记。

@counter-style winners-list {
  system: fixed;
  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg
  suffix: " ";
}

additive-symbols尽管symbols属性中指定的符号可以被system中定义的大部分算法所使用，但是一些system属性的值，比如additive，依赖于本描述符所描述的加性元组。Each additive tuple consists of a counter symbol and a non negative integer weight. 每个加性元组包含一个可数的符号和一个非负证书的权重。The additive tuples must be specified in the descending order of their weights.speak-as定义如何在语音识别器中读出计数器样式，比如屏幕阅读器。例如基于该描述符的值，标记符号的值可以作为有序列表的数字或者字幕作为无序列表的音频提示读出。

正式语法

@counter-style <counter-style-name> {
  [ system: <counter-system>; ] ||
  [ symbols: <counter-symbols>; ] ||
  [ additive-symbols: <additive-symbols>; ] ||
  [ negative: <negative-symbol>; ] ||
  [ prefix: <prefix>; ] ||
  [ suffix: <suffix>; ] ||
  [ range: <range>; ] ||
  [ pad: <padding>; ] ||
  [ speak-as: <speak-as>; ] ||
  [ fallback: <counter-style-name>; ]
}where 
<counter-style-name> = <custom-ident>

示例

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

上面的counter style规则在列表中可以如下使用：

.items {
   list-style: circled-alpha;
}

会产生如下列表：

Ⓐ One

Ⓑ Two

Ⓒ Three

Ⓓ Four

Ⓔ FIve

...

...

Ⓨ Twenty Five

Ⓩ Twenty Six

27 Twenty Seven

28 Twenty Eight

29 Twenty Nine

30 Thirty

查看更多例子 demo page.

规范

浏览器兼容性