speak-as

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

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

语法

/* 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。 

语法

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

where
<counter-style-name> = <custom-ident>

例子

HTML

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

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 Status Comment
CSS Counter Styles Level 3
speak-as
Candidate Recommendation Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
speak-asChrome No support NoEdge No support NoFirefox Full support 33IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 33Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

参考