additive-symbols

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.

additive-symbols 記述子は、カウンターの system 記述子が加算的 (additive) な場合の記号を指定することができます。 additive-symbols 記述子では加算的なタプルを、それぞれ記号と非負数の整数による重みの組で定義します。加算的なシステムは、ローマ数字のような sign-value numbering を構築するために使われます。

構文

css
additive-symbols: 3 "0";
additive-symbols:
  3 "0",
  2 "\2E\20";
additive-symbols:
  3 "0",
  2 url(symbol.png);

system 記述子が cyclic, numeric, alphabetic, symbolic, fixed の場合は、 symbols() 記述子を additive-symbols の代わりに使用してください。

公式定義

関連するアット規則@counter-style
初期値n/a (required)
計算値指定通り

形式文法

[ <integer [0,∞]> && <symbol> ]#

<symbol> = <string> | <image> | <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 additive-symbols-example {
  system: additive;
  additive-symbols:
    V 5,
    IV 4,
    I 1;
}
.list {
  list-style: additive-symbols-example;
}

結果

仕様書

Specification
CSS Counter Styles Level 3
# counter-style-symbols

ブラウザーの互換性

BCD tables only load in the browser

関連情報