speak-as | CSS

在此页

句法
可访问性关注
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

speak-as descriptor specifies how a counter symbol constructed with a given @counter-style will be represented in the spoken form. For example, an author can specify a counter symbol to be either spoken as its numerical value or just represented with an audio cue.

句法

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

If the value of


speak-as

is specified as


auto

, then the effective value of


speak-as

will be determined based on the value of the


system

descriptor:

If the value of system is alphabetic , the effective value of speak-as will be spell-out .
若 system is cyclic , the effective value of speak-as will be bullets .
若 system is extends , the value of speak-as will be the same as if speak-as: auto is specified on the extended style.
For all other cases, specifying auto has the same effect as specifying speak-as: numbers .

bullets

A phrase or an audio cue defined by the 用户代理 for representing an unordered list item will be read out.

numbers

The numerical value of the counter will be read out in the document language.

words

The user agent will generate a counter value as normal and read it out as a word in the document language.

spell-out

The user agent will generate a counter representation as normal and would read it out letter by letter. If the user agent doesn't know how to read out a partiular counter symbol, the user agent might read it out as if the value of


speak-as

was


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

默认为


auto

可访问性关注

Assistive technology support is very limited for the speak-as property. Do not rely on it to convey information critical to understanding the page's purpose.

Let's Talk About Speech CSS | CSS Tricks

形式定义

相关 at-rule	`@counter-style`
初始值	`auto`
计算值	如指定

形式句法

auto | bullets | numbers | words | spell-out | <counter-style-name>where 
<counter-style-name> = <custom-ident>

范例

Setting the spoken form for a counter

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;
}

结果

规范

规范	状态	注释
CSS Counter Styles Level 3 The definition of 'speak-as' in that specification.	候选推荐	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`speak-as`	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 33	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 33	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持

另请参阅

list-style , list-style-image , list-style-position
symbols() , the functional notation creating anonymous counter styles.

元数据

最后修改： Jul 21, 2020

在此页

句法

值