blob: c04852742cbabe1b0982966460847211c408febb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
---
title: fallback
slug: Web/CSS/@counter-style/fallback
tags:
- '@counter-style'
- アットルール記述子
- CSS
- CSS カウンタースタイル
- CSS 記述子
- リファレンス
browser-compat: css.at-rules.counter-style.fallback
translation_of: Web/CSS/@counter-style/fallback
---
{{CSSRef}}
**`fallback`** 記述子は、現在のカウンタースタイルが特定のカウンター値でマーカー表現を生成できなかった場合に、代替で使用されるカウンタースタイルを指定するために使用します。
## 構文
```css
/* キーワード値 */
fallback: lower-alpha;
fallback: custom-gangnam-style;
```
## 解説
指定された代替スタイルも表現を構築できなかった場合、そのさらに代替スタイルが使用されます。有効な代替スタイルが指定されていなかった場合は、既定で `decimal` になります。
代替スタイルが使用される場面は 2 つあります。
- カウンタースタイルに {{cssxref('@counter-style/range', 'range')}} 記述子が指定されていた場合、その範囲を外れた値を表現するのに代替スタイルが使用されます。
- `fixed` が {{cssxref('@counter-style/system', 'system')}} で使用され、すべてのリスト項目に対応させる記号が不足した場合、残りのリスト項目に代替スタイルが使用されます。
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
### カウンターの代替スタイルの指定
#### 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;
}
```
#### 結果
{{ EmbedLiveSample('Specifying_a_fallback_counter_style') }}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
- {{cssxref("symbols()")}}: 無名のカウンタースタイルを生成する関数記法
|
