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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
speak-as

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

参考