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 記述子が指定されていた場合、その範囲を外れた値を表現するのに代替スタイルが使用されます。
  • fixed が system で使用され、すべてのリスト項目に対応させる記号が不足した場合、残りのリスト項目に代替スタイルが使用されます。

公式定義

関連するアット規則@counter-style
初期値decimal
計算値指定通り

形式文法

<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

ブラウザーの互換性

BCD tables only load in the browser

関連情報