speak-as

当已明确定义 @counter-style 后,可以用 speak-as 定义在口语场景中如何表述这个 counter 符号。比如作为一篇文章的作者可以指定,当计算机读出这篇文章时,是以数字序号表示 counter,还是仅仅用语音提示。

Related at-rule@counter-style
初始值auto
计算值as specified

语法

css
/* Keyword values */
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;

/* @counter-style name value */
speak-as: <counter-style-name>;

auto

如果 speak-as 的值是 auto,那么它的实际值是由 system 的值决定的:

  • 如果 system 的值是 alphabeticspeak-as 的值是 spell-out
  • 如果 system 的值是 cyclicspeak-as 的值是 bullets
  • 如果 system 的值是 extends,当被继承的样式上也定义了 speak-as: auto,那么 speak-as 的值就和被继承样式的值相同。
  • 其他场景下,表现都与 speak-as: numbers 相同。
bullets

用于表示无序的列表项,具体的发音由user agent决定。

numbers

根据文档语言的规范,读出计数器标明的数字的值。

words

在显示上,由用户代理决定计数器的值,读的时候以单词为单位。

spell-out

依然是用户代理决定了计数器,但它将会以逐个字母的形式被读出。如果遇到某个计数器,用户代理不知道要如何读时,会将它当做 numbers 处理。

<counter-style-name>

The name of another counter style, specified as a <custom-ident>. If included, the counter will be spoken out in the form specified in that counter style, kind of like specifying the fallback descriptor. If the specified style does not exist, speak-as defaults to auto.它的另一个名称是 <custom-ident>。使用了这个值后,计数器将以被指定的样式名的形式读出,和声明了 fallback 的效果类似。如果被指定的样式不存在,speak-as 将回退为auto

语法

speak-as = 
auto |
bullets |
numbers |
words |
spell-out |
<counter-style-name>

例子

HTML

html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

css
@counter-style speak-as-example {
  system: fixed;
  symbols:     ;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;
}

结果

无障碍问题

这个属性的无障碍支持度不太友好。请别指望靠它能正确地传递出页面的核心信息。

Let's Talk About Speech CSS | CSS Tricks

规范

Specification
CSS Counter Styles Level 3
# counter-style-speak-as

浏览器兼容性

BCD tables only load in the browser

参考