“@counter-style”ルール~“range”ディスクリプタ

概要

“range”ディスクリプタはカウンター・スタイルが定義されているリスト・カウンターの値の範囲、つまり“@counter-style”ルールで定義されたカウンター・スタイルが対応している範囲を示します。

リスト・カウンターの値が“range”ディスクリプタで示された範囲の外である場合には“fallback”ディスクリプタで指定された代替のカウンター・スタイルが代わりに使用されます。

値

値の指定方法

“auto”を指定する場合、値は1個だけ記述することができます。

具体的にカウンター・スタイルが定義しているリスト・カウンターの値の範囲を指定する場合は“<integer>”値もしくは“infinite”をホワイトスペースで区切って2個記述します。

1個目の値がカウンター・スタイルが定義しているリスト・カウンターの値の下限、2個目の値が上限を表します。

“infinite”を使用する場合、1個目の値として記述された“infinite”は正の無限大、2個目の値として記述された“infinite”は負の無限大を表します。

ユーザー・エージェントは少なくとも“-2¹⁵”から“2¹⁵-1”までの範囲に対応するよう求められています。“range”ディスクリプタで示された範囲がユーザー・エージェントが対応する範囲外まで含む場合には対応するもっとも近い範囲をカウンター・スタイルが定義されている範囲とします。

また、カウンター・スタイルが定義しているリスト・カウンターの値が連続していない場合にはコンマ(“,”)で区切り、複数の範囲を記述することもできます。

指定した下限のいずれかが上限よりも大きい場合、“range”ディスクリプタ全体が無効となり、無視されます。

使用例

ol { list-style-type: sample-counter;}

@counter-style sample-counter {

system: numeric;
symbols: "\1D7D8" "\1D7D9" "\1D7DA" "\1D7DB" "\1D7DC" "\1D7DD" "\1D7DE" "\1D7DF" "\1D7E0" "\1D7E1";
range: 3 5;
fallback: decimal;

}

1. バナナ
2. マンゴスチン
3. アボカド
4. ドリアン
5. バンレイシ
6. アテモヤ

仕様書

定義されている仕様書

range

<integer>