fallback

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

fallback 記述子は、現在のカウンタースタイルが特定のカウンター値でマーカー表現を生成できなかった場合に、代替で使用されるカウンタースタイルを指定するために使用します。

構文

css
/* キーワード値 */
fallback: lower-alpha;
fallback: custom-gangnam-style;

解説

指定された代替スタイルも表現を構築できなかった場合、そのさらに代替スタイルが使用されます。有効な代替スタイルが指定されていなかった場合は、既定で decimal になります。

代替スタイルが使用される場面は 2 つあります。

  • カウンタースタイルに range 記述子が指定されていた場合、その範囲を外れた値を表現するのに代替スタイルが使用されます。
  • fixedsystem で使用され、すべてのリスト項目に対応させる記号が不足した場合、残りのリスト項目に代替スタイルが使用されます。

公式定義

形式文法

<counter-style-name>

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

カウンターの代替スタイルの指定

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 fallback-example {
  system: fixed;
  symbols: "\24B6" "\24B7" "\24B8";
  fallback: upper-alpha;
}

.list {
  list-style: fallback-example;
}

結果

仕様書

Specification
CSS Counter Styles Level 3
# counter-style-fallback

ブラウザーの互換性

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
fallback

Legend

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

Full support
Full support

関連情報