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 は @counter-style アットルールの記述子で、現在のカウンタースタイルが特定のカウンター値でマーカー表現を生成できなかった場合に、代替で使用されるカウンタースタイルを指定するために使用します。

構文

css

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

値

この記述子は、単一の <counter-style-name> をその値として取ります。

<counter-style-name>: 代替として使用するカウンタースタイルの名前を提供します。これは、大文字と小文字を区別する独自の CSS カウンタースタイル(引用符は不要)の <custom-ident>、または大文字と小文字を区別しない list-style-type プロパティの値(decimal、disc といった具合に)のどちらかです。

省略した場合、カウンターの代替は既定で decimal です。

カウンタースタイルの記述子として指定された fallback の値が、カウンタースタイルに指定された range 記述子に使用されます。fallback スタイルは、範囲外にあるすべての値を表すために使用されます。fallback スタイルは、fixed の system が使用され、すべてのリストアイテムをカバーするのに十分な記号がない場合にも使用されます。fallback スタイルは、固定システムの範囲を超えるすべての値を表すために使用されます。これらの場合、および定義されたカウンターが特定のカウンター値を作成できないその他の場合、fallback スタイルが使用されます。

指定された代替スタイルも表現を構築できない場合、その代替カウンターの fallback 値が使用されます。その代替スタイルの代替も表現を構築できない場合、その代替の代替が使用されます。この代替は、カウンター表現を構築できる代替が見つかるまで続きます。代替 fallback 値が表現を構築できない場合(代替スタイルに fallback 値が設定されていない場合、または fallback 値が指定されていないか、または不正な場合)、fallback は既定で decimal になります。

公式定義

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

形式文法

fallback = 
 <counter-style-name>

例

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

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: "24円B6" "24円B7" "24円B8";
 fallback: upper-alpha;
}
.list {
 list-style: fallback-example;
}