system
Baseline 2023Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
system 記述子は、整数値のカウンターを文字列表現に変換するために使用するアルゴリズムを指定します。これは @counter-style で使用され、定義されたスタイルの動作を定義するために使用されます。
system 記述子で指定されたアルゴリズムが特定のカウンター値の表現を構築できない場合、その値の表現は提供された代替システムを使用して構築されます。
構文
/* キーワード値 */
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;
/* 複合値 */
system: fixed 3;
system: extends decimal;
system: extends circled-letters;
値
3 つの形のうちのいずれかを取ることができます。
- キーワード値
cyclic,numeric,alphabetic,symbolic,additive,fixedのいずれか。 - キーワード値
fixedと整数値。 - キーワード値
extendsと<counter-style-name>の名前。
値は次のものです。
cyclic-
symbols記述子で指定された記号のリストを順番に繰り返します。リストの終わりに到達すると、サイクルは最初に戻り、最初から繰り返されます。この値は、1 つの記号のみを使用する基本的な箇条書きスタイルと、複数の記号を使用するスタイルの両方に役立ちます。symbols記述子には、少なくとも 1 つの記号を指定する必要があります。そうしないと、カウンタースタイルは有効になりません。 numeric-
カウンター記号を位取り記数法の桁として解釈します。この記数法は、上で説明した
alphabeticシステムと似ています。主な違いは、alphabeticシステムでは、symbols記述子で与えられた最初のカウンター記号が1、次の記号は2、以下同様に解釈されますが、この記数法では、最初のカウンター記号が 0、次は1、次は2というように解釈されることです。symbols記述子には 2 つ以上の記号を指定する必要があります。そうでなければ、カウンタースタイルが有効になりません。 alphabetic-
指定された記号を桁として、アルファベット記数法に解釈します。
"a"から"z"までの文字がalphabetic記数法のカウンタースタイルの記号として指定された場合、最初の 26 個のカウンター表現は"a","b"から"z"までとなります。この時点までは、上で説明したsymbolicシステムと同じ動作になります。しかし、"z"以降は"aa","ab","ac"… のように続きます。symbols記述子には 2 つ以上の記号を指定する必要があります。そうでなければ、カウンタースタイルが有効になりません。symbols記述子で与えられた最初のカウンター記号は1として、次の記号は2として、以下同様に解釈されます。この記数法はまた、正のカウンター値に対してのみ定義されています。 symbolic-
symbols記述子のリストで指定されたシンボルを繰り返し循環し、リストを順番に 2 回、3 回と渡すたびに、シンボルを 2 倍、3 倍といった具合に増やします。例えば、元の記号が "◽" と "◾" であった場合、循環するごとに "◽◽" と "◾◾" 、 "◽◽◽" と "◾◾◾" のように変化します。symbols記述子には 1 つ以上の記号を指定する必要があります。そうしないと、カウンタースタイルは有効になりません。このカウンターシステムは、正の値のカウンターにのみ動作します。 additive-
異なる位置で数字を再利用して異なる値を得るのではなく、より大きな値のために追加の数字を定義する、ローマ数字などの「記号値」の記数法を表すために使用されます。このようなシステムでは、数値の値は、その数値の数字を足し合わせることで求めることができます。
additive-symbolsと呼ばれる追加の記述子は、 1 つの加算タプルで指定しなければならず、そうでなければカウンタースタイルのルールが有効になりません。加算タプルは複合カウンター記号に似ており、通常のカウンター記号と負でない整数の重みの 2 つの部分から構成されます。加算タプルは重みの降順で指定しなければならず、そうでない場合は無効となります。 fixedまたはfixed <integer>-
有限のシンボルセットを定義し、
symbols記述子で指定されたシンボルリストを 1 回反復処理します。指定されたシンボルがすべて反復処理されると、代替のカウンタースタイルが使用されます。このキーワード値は、カウンタースタイルの値が有限の場合に便利です。symbols記述子には、少なくとも 1 つのシンボルを指定する必要があります。そうしないと、カウンタースタイルは有効になりません。fixedキーワードの後に、オプションの<integer>値を指定できます。指定した場合、<integer>値は、シンボルリストから最初のシンボルを取得するリスト内のアイテムを示します。省略した場合、integerの既定値は1となり、リストの最初のアイテムに最初のシンボルが割り当てられます。 extends-
拡張カウンタースタイルの一部の側面を変更できるようにすることで、別のブラウザーまたは作成者が定義したカウンタースタイルのアルゴリズムを拡張します。指定されていない記述子とその値は、指定された拡張カウンタースタイルから継承されます。
extendsで指定したカウンタースタイル名がまだ定義されていない場合、既定ではdecimalカウンタースタイルが拡張されます。symbolsまたはadditive-symbols記述子を含んではなりません。そうしないと、カウンタースタイルルールが無効になります。1 つ以上のカウンタースタイル定義が、そのextends値で循環を形成している場合、ブラウザーは、その循環に関与するすべてのカウンタースタイルをdecimalスタイルから拡張したものとして扱います。
メモ:
値が cyclic、numeric、alphabetic、symbolic、fixed の場合には、 symbols 記述子が必要です。 additive 値が設定されている場合には、 additive-symbols 記述子が必要です。
公式定義
| 関連するアット規則 | @counter-style |
|---|---|
| 初期値 | symbolic |
| 計算値 | 指定通り |
形式文法
例
cyclic カウンター
cyclic 値は、シンボルリストを走査し、必要に応じてリストを繰り返します。
CSS
@counter-style fisheye {
system: cyclic;
symbols: ◉ ➀;
suffix: ": ";
}
ul {
list-style: fisheye;
}
結果
fixed カウンター
fixed 値は、シンボルリストを 1 回だけ走査し、integer 値で示されるリストアイテムの番号から 1 つのサイクルを開始します。
CSS
@counter-style circled-digits {
system: fixed 3;
symbols: ➀ ➁ ➂;
suffix: ": ";
}
ul {
list-style: circled-digits;
}
結果
symbolic カウンター
symbolic 値は、symbols 記述子で定義されているリストをループし、リストを 2 回目と 3 回目にループするたびに、シンボルの数をそれぞれ 2 倍、3 倍にします。
CSS
@counter-style abc {
system: symbolic;
symbols: a b c;
suffix: ". ";
}
ul {
list-style: abc;
}
結果
alphabetic カウンター
CSS
@counter-style abc {
system: alphabetic;
symbols: a b c;
suffix: ". ";
}
ul {
list-style: abc;
}
結果
numeric カウンター
symbols 記述子で指定された最初の記号は、ここでは 0 と解釈されます。
CSS
@counter-style abc {
system: numeric;
symbols: a b c;
suffix: ". ";
}
ul {
list-style: abc;
}
結果
numeric カウンターに数字を使用
次の例のように、 0 から 9 までの数字が記号として指定された場合、このカウンタースタイルは数字のカウンタースタイルと同様に描画されます。
CSS
@counter-style numbers {
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
suffix: ".";
}
ul {
list-style: numbers;
}
結果
additive カウンター
この例では、ローマ数字を使ってリストを描画しています。 range が指定されていることに注意してください。これは、カウンターの値が 3999 になるまでの間、正しいローマ数字を表示するためです。範囲を超えると、残りのカウンター表現は decimal スタイル、すなわち代替となります。もし、カウンターの値をローマ数字で表現する必要がある場合には、自分でルールを作り直すのではなく、定義済みのカウンタースタイルである upper-roman または lower-roman のどちらかを使用するとよいでしょう。
HTML
start 属性を <ol> 要素に使用することで、カウントを 1 から始める必要がないことを示しています。さらに、 value 属性を 5 番目の <li> 要素で使用することで、 @counter-style を使用して定義したカウンターが、ネイティブのカウンターと同様に動作することを示しています。
<ol start="48">
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li value="109">109</li>
<li>110</li>
<ol></ol>
</ol>
CSS
@counter-style uppercase-roman {
system: additive;
range: 1 3999;
additive-symbols:
1000 M,
900 CM,
500 D,
400 CD,
100 C,
90 XC,
50 L,
40 XL,
10 X,
9 IX,
5 V,
4 IV,
1 I;
}
ol {
list-style: uppercase-roman;
padding-left: 5em;
}
結果
extends の例
この例では、いくつかのネイティブの list-style-type カウンター値の 1 つである lower-alpha のアルゴリズム、記号、およびその他のプロパティを使用していますが、ピリオド ('.') を削除し、(a) および (b) のように文字を括弧で囲むことで拡張しています。
HTML
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
CSS
@counter-style alpha-modified {
system: extends lower-alpha;
prefix: "(";
suffix: ") ";
}
ul {
list-style: alpha-modified;
}
結果
仕様書
| Specification |
|---|
| CSS Counter Styles Level 3 # counter-style-system |
ブラウザーの互換性
関連情報
- その他の
@counter-style記述子:symbols,additive-symbols,negative,prefix,suffix,range,pad,speak-as,fallbackなど list-style,list-style-image,list-style-positionsymbols()、無名のカウンタースタイルを生成する関数記法