1. 序論
この仕様は、 次に挙げるものを定義する：
- `marker$pe 疑似要素
- ~markerを生成するための`表示~型$ `list-item$v2
- ~markerの配置と~style付けを制御するためのいくつかの~prop
また、 `~counter$も定義する。 それは、 特別な数量的~objであり，~markerの既定の内容を生成するために利用されることが多い。 ◎ It also defines counters, which are special numerical objects often used to generate the default contents of markers.
付番された各~list~itemに対し、 ~marker（ `marker$pe ）を利用して，両側に丸括弧を追加する方法を，次に例示する： ◎ For instance, the following example illustrates how markers can be used to add parentheses around each numbered list item:
<style>
li::marker { content: "(" counter(list-item, lower-roman) ")"; }
li { display: list-item; }
</style>
<ol>
<li>これは一個目の~item。
<li>これは二個目の~item。
<li>これは三個目の~item。
</ol>
これは、 次の様に呈示されるべきである： ◎ It should produce something like this:
(i) これは一個目の~item。 (ii) これは二個目の~item。 (iii) これは三個目の~item。
注記： この例は、 ~HTMLにて通例的に必要yなものより ずっと冗漫である — ~UAの既定の~stylesheetは，必要yな~style付けの大部分について面倒を見るので。 ◎ Note: Note that this example is far more verbose than is usually needed in HTML, as the UA default style sheet takes care of most of the necessary styling.
子孫~選択子と子~選択子を用いれば、 ~listが埋込まれた深さに応じて，異なる型の~markerを指定することもアリになる。 ◎ With descendant selectors and child selectors, it’s possible to specify different marker types depending on the depth of embedded lists.
1.1. 値~定義
【 この節の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】
2. ~list~itemの宣言-法
`~list~item@ とは、 `display$p ~propが `list-item$v2 に設定された要素である†。 各`~list~item$は、 他の要素にはない `marker$pe 疑似要素を生成する。 加えて，`~list~item$は、［ 暗黙な `list-item$v `~counter$ ］を自動的に増減する（増やす／減らす § 暗黙的な `list-item^v ~counter を見よ）。 ◎ A list item is any element with its display property set to list-item. List items generate ::marker pseudo-elements; no other elements do. Additionally, list items automatically increment an implied list-item counter (see § 4.6 The Implicit list-item Counter).
【† この定義は、 正確には， “`display^p ~propの値が `list-item^v を含む” と記されるべきであろう — `list-item^v のみを指定した場合、 `block flow list-item^v に展開される結果，要素は塊~levelの~boxを生成することになるが、 `inline list-item^v のように，行内~levelの~boxを生成するように指定することもできるので。 】
3. ~marker
`~marker@ （~marker~box）は、 `~list~item$`表示~型$を定義する特能であり， ~list内の各`~list~item$の先頭を表す助けになる記号や序数を与える。 ~CSS~layout~modelにおいては、 `~marker$は，各`~list~item$に結付けられた`~marker~box$により表現される。 この`~marker$の内容は、 当の`~list~item$の［ `list-style-type$p, `list-style-image$p ］~propで, および `marker$pe 疑似要素に【適用-可能な】各種~propをアテガうことにより，制御できる。 ◎ The defining feature of the list item display type is its marker, a symbol or ordinal that helps denote the beginning of each list item in a list. In the CSS layout model, list item markers are represented by a marker box associated with each list item. The contents of this marker can be controlled with the list-style-type and list-style-image properties on the list item and by assigning properties to its ::marker pseudo-element.
3.1. `marker^pe 疑似要素
`~marker~box$は、 `~list~item$の `marker$pe 疑似要素により，`~list~item$の最初の子として生成される — 要素~上に `before$pe 疑似要素も存在するならば，その前に。 それは、 `§ ~marker内容の生成-法＠#content-property$ にて定義されるように内容で埋められる。 ◎ The marker box is generated by the ::marker pseudo-element of a list item as the list item’s first child, before the ::before pseudo-element (if it exists on the element). It is filled with content as defined in § 3.2 Generating Marker Contents.
この例では、 ~markerを利用して， “Note” と指名されている段落を付番する： ◎ In this example, markers are used to number paragraphs that are designated as "notes":
<style>
p { margin-left: 12 em; }
p.note {
display: list-item;
counter-increment: note-counter;
}
p.note::marker {
content: "Note " counter(note-counter) ":";
}
</style>
<p>これは文書~内の最初の段落。
<p class="note">これはとても短い段落。
<p>ここが末尾。
次の様に描画されるべきである： ◎ It should render something like this:
これは文書~内の最初の段落。
Note 1: これはとても短い段落。
ここが末尾。
`marker$pe 疑似要素を利用すれば、 ~listの~markerを~list~item自身の~textとは独立に~styleできる： ◎ By using the ::marker pseudo-element, a list’s markers can be styled independently from the text of the list item itself:
<style>
p { margin-left: 8em } /*
~counter用に空間を作る
◎
Make space for counters
*/
li { list-style-type: lower-roman; }
li::marker { color: blue; font-weight:bold; }
</style>
<p>これは先行する長い段落 ...
<ol>
<li>これは一個目の~item
<li>これは二個目の~item
<li>これは三個目の~item
</ol>
<p>これは後続する長い段落 ...
前掲の文書は、 次の様に描画されるべきである： ◎ The preceding document should render something like this:
これは先行する長い段落 ...
i. これは一個目の~item
ii. これは二個目の~item
iii. これは三個目の~item
これは後続する長い段落 ...
以前までは、 ~markerを~styleする仕方は，継承を通す他になかった。 欲される~marker~styleを~list~itemにあてがった上で、 ~list~itemの実際の内容を要素で包装して，その要素~上で~~元の~styleに復帰させる必要があった。 ◎ Previously the only way to style a marker was through inheritance; one had to put the desired marker styling on the list item, and then revert that on a wrapper element around the list item’s actual contents.
`~marker$は、 `~list~item$用に限り存在する。 他の要素~上では、 `marker$pe 疑似要素の `content$p ~propは `none$v2 に算出されるモノトスル — それは、 ~markerの作成を抑止する。 ◎ Marker boxes only exist for list items: on any other element, the ::marker pseudo-element’s content property must compute to none, which suppresses its creation.
3.1.1. `marker^pe に適用される~prop
すべての~propは、 `marker$pe 疑似要素に設定でき，`算出d値$を有することになる — それらは、 その~text内容に継承されることになる。 ◎ All properties can be set on a ::marker pseudo-element and will have a computed value which will then inherit to its text content.
継承-可能な~propのうち，~textに適用されるものは、 `marker$pe 疑似要素に設定できる — それらは継承され，その~text内容に対し効果を発揮することになる。 そのような~propの例には、 次が挙げられる： ◎ Inheritable properties that apply to text can be set on the ::marker pseudo-element: these will inherit to and take effect on its text contents. Some examples of such properties include:
- `text-transform$p, `letter-spacing$p, `word-spacing$p （ `CSS-TEXT-3$r を見よ） ◎ text-transform, letter-spacing, word-spacing (see [CSS-TEXT-3])
- すべての~font~prop （ `CSS-FONTS-3$r, その後継を見よ） ◎ all the font properties (see [CSS-FONTS-3] and its successors)
- `color$p （ `CSS-COLOR-3$r を見よ） ◎ the color property (see [CSS-COLOR-3])
しかしながら，実際に`~marker~box$に適用される~CSS~propは、 次に挙げるものに限られる： ◎ However, only the following CSS properties actually apply to a marker box:
- `text-combine-upright$p, `unicode-bidi$p, `direction$p （ `CSS-WRITING-MODES-3$r を見よ） ◎ the text-combine-upright, unicode-bidi, and direction properties (see [CSS-WRITING-MODES-3])
- `content$p （ `§ ~marker内容の生成-法＠#content-property$を見よ） ◎ the content property (see § 3.2 Generating Marker Contents, below)
- 各種［ ~animation／遷移 ］~prop（ `CSS-ANIMATIONS-1$r, `CSS-TRANSITIONS-1$r を見よ） ◎ all animation and transition properties (see [CSS-ANIMATIONS-1] and [CSS-TRANSITIONS-1])
他の~propは、 `~cascade$の［ `作者~出自$／`利用者~出自$ ］において `marker$pe に対し直に宣言されたときは，`~marker~box$に効果を発揮しないベキである。 ~UAは、 そのような各~propに対し，適用しないものと扱っても, 次を行ってもヨイ ⇒ `~UA出自$に属する `!important^css 規則にて，その値を設定することにより、 その［ 値, あるいは`出自の要素$からの継承 ］を施行する。 ◎ Other properties should not have an effect on the marker box when declared directly on ::marker in the author or user origin of the cascade. UAs may either treat such properties as not applying, or enforce their value or inheritance from the originating element by setting a user-agent origin !important rule.
注記： 将来の仕様は、 この~listを拡張して，どの~propが効果を発揮し得るかに対する制約を緩めるものと期待される。 しかしながら， `outside$v な~marker~boxの~layoutが全部的に定義されるまでは、 将来の互換性~問題を避けるため，許容される~propは上に挙げたものに限られる。 ◎ NOTE: It is expected that future specifications will extend this list of properties and relax the restriction on which properties can take effect. However at the moment outside marker box layout is not fully defined, so to avoid future compatibility problems only these properties are allowed.
加えて，~UAは、 自身の既定の~stylesheetに次の規則を追加するモノトスル： ◎ Additionally, UAs must add the following rule to their default style sheet:
::marker, ::before::marker, ::after::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
white-space: pre;
text-transform: none;
}
注記： `marker$pe 疑似要素は［ `before$pe ／ `after$pe ］疑似要素の`~marker~box$も表現できるが、 `::marker^css は，これらの~markerを選択しない — それは、 `*::marker^css に展開される`複合-選択子$であり，`出自の要素$は`疑似要素$にならないので `SELECTORS-4$r 。 選択するためには、 `::before::marker^css のように，`選択子$内に明示的に指定する必要がある。 ◎ Note: Although the ::marker pseudo-element can represent the marker box of a ::before or ::after pseudo-element, the compound selector ::marker, which expands to *::marker [SELECTORS-4], will not select these markers—an originating element that is a pseudo-element needs to be explicitly specified in the selector, e.g. ::before::marker.
上の `white-space:pre$p による挙動は、 ~~正解とは言えない。 ［ `white-space-collapse【！text-space-collapse】: preserve-spaces$p, `white-space-trim【！text-space-trim】: discard-after$p ］とする方が、 ここで必要なものに近いかもしれない。 `4448$issue, `4891$issue における論点を見よ。 ◎ white-space: pre doesn’t have quite the right behavior; text-space-collapse: preserve-spaces + text-space-trim: discard-after might be closer to what’s needed here. See discussion in Issue 4448 and Issue 4891.
3.2. ~marker内容の生成-法
`~marker~box$の内容は、 次に挙げる条件のうち最初に満たされるものにより決定される： ◎ The contents of a marker box are determined by the first of these conditions that is true:
- `marker$pe 自身の `content$p は `normal$v2 でない場合： ◎ content on the ::marker itself is not normal
- 内容は — `before$pe に対するとき正確に同じに — `content$p ~propに定義されるように決定される。 ◎ The contents of the marker box are determined as defined by the content property, exactly as for ::before.
- `出自の要素$の `list-style-image$p が`~marker画像$を定義する場合： ◎ list-style-image on the originating element defines a marker image
-
内容は、 次の順の並びからなる：
- 指定された`~marker画像$を表現している，`匿名$かつ`行内$の`置換され$る要素
- 1 個の~space（ U+0020 SPACE ）のみからなる`~text連列$
- `出自の要素$の `list-style-type$p が`~marker文字列$を定義する場合： ◎ list-style-type on the originating element defines a marker string
- 内容は、 指定された`~marker文字列$からなる`~text連列$になる。 ◎ The marker box contains a text sequence consisting of the specified marker string.
- 他の場合： ◎ otherwise
- 内容は無い — `marker$pe は~boxを生成しない。 ◎ The marker box has no contents and ::marker does not generate a box.
加えて，~UAは、 保全された`強制d行l分断$があれば を~spaceに変形するか破棄してもヨイ。 ◎ Additionally, the UA may transform into spaces or discard any preserved forced line breaks.
3.3. 画像~marker： `list-style-image^p ~prop
◎名 `list-style-image@p ◎値 `image$vt | `none$v ◎初 `none^v ◎適 `~list~item$ ◎継 される ◎百 受容しない ◎算 ~keyword `none$v ／ `image$t の算出d値 ◎順 文法に従う ◎ア 離散的 ◎表終`~marker画像@ を指定する。 それは、 `~list~item$の`~marker$を埋めるときに — ~list~itemの `content$p が `normal$v2 のときに限り — 利用される。 各種 値は、 次に従う： ◎ Specifies the marker image, which is used to fill the list item’s marker when its content is normal. The values are as follows:
- `image$t
- `image$t が`妥当な画像$を表現する場合、 それが要素の`~marker画像$を指定する。 他の場合、 要素には`~marker画像$は無い。 ◎ If the <image> represents a valid image, specifies the element’s marker image as the <image>. Otherwise, the element has no marker image.
- `none@v
- 要素には`~marker画像$は無い。 ◎ The element has no marker image.
`~marker画像$は、 `既定の~sizing~algo$ `css-images-3$r を利用して~sizeされる — `指定d~size$は無し【拘束されない】, `既定の~obj~size$には `1em^v 平方を与える下で。 ◎ The marker image is sized using the default sizing algorithm [css-images-3] with no specified size and a default object size of 1em square.
各~list~itemの先頭に，画像 "`ellipse.png^c" による~markerを設定する例： ◎ The following example sets the marker at the beginning of each list item to be the image "ellipse.png".
li { list-style-image: url("http://www.example.com/ellipse.png") }
3.4. ~textに基づく~marker： `list-style-type^p ~prop
◎名 `list-style-type@p ◎値 `counter-style$vt | `string$vt | `none$v ◎初 `disc^v ◎適 `~list~item$ ◎継 される ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア 離散的 ◎表終`~marker文字列@ を指定する。 それは、 `~list~item$の`~marker$を埋めるときに — ~list~itemの `content$p が `normal$v2 , かつ`~marker画像$は無いときに限り — 利用される。 各種 値は、 次に従う： ◎ Specifies the marker string, which is used to fill the list item’s marker when its content value is normal and there is no marker image. The values are as follows:
- `counter-style$t
- 要素の`~marker文字列$を［ 指定された `counter-style$t を利用して表現される `list-item$v ~counterの値 ］として指定する ◎ Specifies the element’s marker string as the value of the list-item counter represented using the specified <counter-style>.
- 特定的には，`~marker文字列$は、［ 指定された `counter-style$t を利用して `list-item$v ~counter値~用の`~counter表現を生成-$した結果 ］の先頭に `counter-style$t の `prefix$d を, 末尾に `counter-style$t の `suffix$d を付け加えたものになる。 指定された `counter-style$t が存在しない場合、 `decimal$v と見做される。 ◎ Specifically, the marker string is the result of generating a counter representation of the list-item counter value using the specified <counter-style>, prefixed by the prefix of the <counter-style>, and followed by the suffix of the <counter-style>. If the specified <counter-style> does not exist, decimal is assumed.
- `string$t
- 要素の`~marker文字列$は、 指定された `string$t になる。 ◎ The element’s marker string is the specified <string>.
- `none@v
- 要素には`~marker文字列$は無い。 ◎ The element has no marker string.
~markerを様々な値に設定する方法を，次の例に示す： ◎ The following examples illustrate how to set markers to various values:
ul { list-style-type: "★"; }
/*
~markerを “星印” に設定する
◎
Sets the marker to a "star" character
*/
p.note {
display: list-item;
list-style-type: "注記：";
list-style-position: inside;
}
/*
注記~段落に，文字列 "注記：" による~markerを与える
◎
Gives note paragraphs a marker consisting of the string "Note: "
*/
ol { list-style-type: upper-roman; }
/*
すべての有順序~listは、
`~counter~style$として `upper-roman$v を利用するよう設定する
`CSS-COUNTER-STYLES-3$r
◎
Sets all ordered lists to use the upper-roman counter-style (defined in the Counter Styles specification [[CSS-COUNTER-STYLES]])
*/
ul { list-style-type: symbols(cyclic '○' '●'); }
/*
すべての無順序~list~itemの~markerに［
~~中空の丸, ベタの丸
］を交替的に設定する。
◎
Sets all unordered list items to alternate between empty and filled circles for their markers.
*/
ul { list-style-type: none; }
/*
~markerをまるごと抑止する
— `list-style-image^p に`妥当な画像$が指定されていない限り。
◎
Suppresses the marker entirely, unless list-style-image is specified with a valid image.
*/
3.5. ~markerの位置決め： `list-style-position^p ~prop
◎名 `list-style-position@p ◎値 `inside$v | `outside$v ◎初 `outside$v ◎適 `~list~item$ ◎継 される ◎百 受容しない ◎算 指定された~keyword — ただし、 注釈文を見よ ◎順 文法に従う ◎ア 離散的 ◎表終この~propは、［ `marker$pe を行内に描画するか，`~list~item$のすぐ外側に位置するか ］を規定する。 各種 値は、 次に従う： ◎ This property dictates whether the ::marker is rendered inline, or positioned just outside of the list item. The values are as follows:
- `inside@v
- 特別な効果は無い （ `marker$pe は、 `~list~item$の内容の始端にある行内~要素になる）。 ◎ No special effect. (The ::marker is an inline element at the start of the list item’s contents.)
- `outside@v
- `~list~item$は`塊~容器$である場合： ~marker~boxは、 `塊~容器$になり，`塊~box$を成す`首要~box$の外側に置かれる。 しかしながら，浮動体に隣接する~list~item~markerの位置は、 定義されない。 ~CSSは、 ~marker~boxの［ 精確な所在 ／ 塗ng順序 ］は指定しないが、［［ `marker-side$p が指示する~box ］の`書字~mode$を利用して，~boxの`行内~始端$側に配置する ］ことを要求する。 ~marker~boxは、 `首要~box$の~borderに固定され，首要~boxの内容ともに~scrollすることはない。 ~UAは、 当の要素の `overflow$p が `visible$v 以外ならば，~markerを隠してもヨイ （この許容は、 将来に変更され得る）。 ~marker~boxの~sizeや内容は、［ `首要~box$や その最初の`行l~box$ ］の縦幅に影響したり，一部の事例では新たな行l~boxを作成させることもある — この相互作用もまた、 定義されない。 ◎ If the list item is a block container: the marker box is a block container and is placed outside the principal block box; however, the position of the list-item marker adjacent to floats is undefined. CSS does not specify the precise location of the marker box or its position in the painting order, but does require that it be placed on the inline-start side of the box, using the writing mode of the box indicated by marker-side. The marker box is fixed with respect to the principal block box’s border and does not scroll with the principal box’s content. A UA may hide the marker if the element’s overflow is other than visible. (This allowance may change in the future.) The size or contents of the marker box may affect the height of the principal block box and/or the height of its first line box, and in some cases may cause the creation of a new line box; this interaction is also not defined.
- これは，~CSS-2をうのみに書き写しただけであり、 真の定義が必要である。 ◎ This is handwavey nonsense from CSS2, and needs a real definition.
- `~list~item$は`行内~box$である場合： この値は `inside$v と等価になる。 ◎ If the list item is an inline box: this value is equivalent to inside.
- 別法として、 ~markerを，行内~boxを成す首要~boxの前にある同胞として~lay-outする~~案もある。 ◎ Alternatively, outside could lay out the marker as a previous sibling of the principal inline box.
例えば： ◎ For example:
<style>
ul.compact { list-style: inside; }
ul { list-style: outside; }
</style>
<ul class=compact>
<li>一個目の "inside" ~list~item
<li>二個目の "inside" ~list~item
</ul>
<hr>
<ul>
<li>一個目の "outside" ~list~item
<li>二個目の "outside" ~list~item
</ul>
上の例は、 次のように整形されるであろう： ◎ The above example may be formatted as:
* 一個目の "inside" ~list~item * 二個目の "inside" ~list~item ======================== * 一個目の "outside" ~list~item * 二個目の "outside" ~list~item
3.6. ~markerの~style付け： `list-style^p 略式~prop
◎名 `list-style@p ◎値 `list-style-position$tp || `list-style-image$tp || `list-style-type$tp ◎初 個々の~propを見よ ◎適 `~list~item$ ◎継 個々の~propを見よ ◎百 個々の~propを見よ ◎算 個々の~propを見よ ◎順 文法に従う ◎ア 個々の~propを見よ ◎表終`list-style$p ~propは、 3 種の~prop［ `list-style-type$p, `list-style-image$p, `list-style-position$p ］を~stylesheetの同じ箇所でまとめて設定する略式である。 ◎ The list-style property is a shorthand notation for setting the three properties list-style-type, list-style-image, and list-style-position at the same place in the style sheet.
例えば： ◎ For example:
UL { list-style: upper-roman inside } /*
すべての `UL^e
◎
Any UL
*/
UL UL { list-style: circle outside } /*
`UL^e の子孫である，すべての `UL^e
◎
Any UL child of a UL
*/
略式における値 `none^v の利用は、 多義的にもなり得る — `none^v は、 `list-style-image$p, `list-style-type$p どちらにも妥当な値なので。 この多義性を解決するため、 略式における値 `none^v は，［ 2 つの~propのうち，この略式で `none^v 以外が設定されていない方の~prop ］に適用するモノトスル。 ◎ Using a value of none in the shorthand is potentially ambiguous, as none is a valid value for both list-style-image and list-style-type. To resolve this ambiguity, a value of none in the shorthand must be applied to whichever of the two properties aren’t otherwise set by the shorthand.
list-style: none disc; /* 画像を `none^v, 型を `disc^v に設定する。 ◎ Sets the image to "none" and the type to "disc". */ list-style: none url(bullet.png); /* 画像を `url(bullet.png)^v, 型を `none^v に設定する。 ◎ Sets the image to "url(bullet.png)" and the type to "none". */ list-style: none; /* 画像, 型の両方とも `none^v に設定する。 ◎ Sets both image and type to "none". */ list-style: none disc url(bullet.png); /* 構文~error ◎ Syntax error */
注記： `list-style-type$p の `counter-style$t 値は、 文法~上の多義性をもたらし得る。 それは `custom-ident$t を含んでおり， `CSS-VALUES-3$r による構文解析~規則が適用されるので。 ◎ Note: The <counter-style> values of list-style-type can also create grammatical ambiguities. As such values are ultimately <custom-ident> values, the parsing rules in [CSS-VALUES-3] apply.
作者は，~list~item要素（例：~HTMLにおける `li$e ）に `list-style$p 情報を直に指定できるが、 そうするときは注意するべきである。 次の規則を考える： ◎ Although authors may specify list-style information directly on list item elements (e.g., li in HTML), they should do so with care. Consider the following rules:
ol.alpha li { list-style: lower-alpha; }
ul li { list-style: disc; }
上の規則は、 期待されるように働かない。 `ul$e を `ol class=alpha^e の中に入子にした場合、 最初の規則の詳細度が高いので， `ul$e の各~list~itemは `lower-alpha^v ~styleを利用するようになる。 次のようにすれば、 意図されるとおりに働く： ◎ The above won’t work as expected. If you nest a ul into an ol class=alpha, the first rule’s specificity will make the ul’s list items use the lower-alpha style.
ol.alpha > li { list-style: lower-alpha; }
ul > li { list-style: disc; }
次のようにすれば、 もっと良く働く： ◎ These work as intended.
ol.alpha { list-style: lower-alpha; }
ul { list-style: disc; }
これらの `list-style$p 値は、 継承により，~list~itemたちへ転送されることになるので。 ◎ These are even better, since inheritance will transfer the list-style value to the list items.
3.7. `marker-side^p ~prop
◎名 `marker-side@p ◎値 `match-self$v | `match-parent$v ◎初 `match-self^v ◎適 `~list~item$ ◎継 される ◎百 受容しない ◎算 指定された~keyword ◎順 文法に従う ◎ア 離散的 ◎表終`marker-side$p ~propは、 `outside$v `~marker~box$が［ ~list~item自身（すなわち，`出自の要素$）, ~list容器（すなわち，`出自の要素$の親） ］どちらの方向性【 `direction$p 】に基づいて位置するかを指定する。 前者の事例では、 ~markerの位置は，同じ~list内の各~list~itemごとに個別にアテガわれた方向性に基づいて変わり得る。 後者の事例では、 一体としての~listにアテガわれた方向性により決定され，すべての~itemは同じ側に整列することになる。 ◎ The marker-side property specifies whether an outside marker box is positioned based on the directionality of the list item itself (i.e. its originating element) or the directionality of the list container (i.e. the originating element’s parent). In the first case, the position of the marker can vary across items in the same list, based on the directionality assigned to each list item individually; in the second case they will all align on the same side, as determined by the directionality assigned to the list as a whole.
- `match-self@v
- `~marker~box$は、 `marker$pe の`出自の要素$の方向性を利用して位置される。 ◎ The marker box is positioned using the directionality of the ::marker’s originating element.
- `match-parent@v
- `~marker~box$は、 `marker$pe の`出自の要素$の親~要素の方向性を利用して位置される。 ◎ The marker box is positioned using the directionality of the ::marker’s originating element’s parent element.
［ 要素 ／ `marker$pe 疑似要素 ］は、 既定では，その~list~itemの方向性に則って自身を位置する。 しかしながら，同じ~group内の~list~itemたちの方向性がまちまちな場合 （例えば、 ~HTMLの `ol^e 内に 異なる `dir^a 属性~値を伴う複数個の `li^e がある場合）、 すべての~markerを同じ側に整列した方が有用なこともある — 作者が，すべての~markerが置かれる “側溝” をその側に作るよう指定することで、 ~markerが可視になるのを確約できるよう。 ◎ By default, elements or ::marker pseudo-elements position themselves according to their list item’s directionality. However, if the list item is grouped with several other list items which may have different directionality (for example, multiple <li>s with different "dir" attributes in an <ol> in HTML), it is sometimes more useful to have all the markers line up on one side, so the author can specify a single "gutter" on that side and be assured that all the markers will lie in that gutter and be visible.
下に示す両~描画とも，次の~HTML例から生成されているが、 ~listの `marker-side$p の値に限り相違がある： ◎ Both of the following example renderings are generated from the following HTML, with the only difference being the value of marker-side on the list:
<ul> <li>左横書きの内容 <li><bdo dir="rtl">右横書きの内容</bdo> <li>左横書きの内容 <li><bdo dir="rtl">右横書きの内容</bdo> </ul>
| `match-self$v | `match-parent$v |
|---|---|
|
• 左横書きの内容
右横書きの内容 •
• 左横書きの内容
右横書きの内容 •
|
• 左横書きの内容
• 右横書きの内容
• 左横書きの内容
• 右横書きの内容
|
このときに~markerの内側にある約物の順序が正しくなるためには、 親の `direction$p 値も取り入れる必要があろう。 [`4202$issue] ◎ For this order punctuation inside the marker correctly, it would also need to take the direction value of the parent. [Issue #4202]
次に関する課題がある ⇒＃ ~keywordを改称すること（ `5308$issue ）／ `list-style-position$p と併合すること（ `4209$issue ） ◎ There are issues open on renaming the keywords and on merging with list-style-position.
4. ~counterによる自動的な付番
`~counter@ は、 ~CSSの中でも特別な数量-追跡子であり， ~CSSにおいて~list~itemを自動的に付番するときに利用される。 どの要素にも 0 個以上の~counterがあり、 文書~treeを通して，~prop値が継承されるのと類似な仕方で継承される。 各`~counter$には、 当の~counterを識別する［ `作成元@cT, `名前@cT ］†, 真偽値をとる `逆順か@cT （既定は ~F ）, 整数をとる `値@cT （`逆順か$cT ~EQ ~T のときは省略可能） がある。 それらは、 各種 `~counter~prop@ — `counter-increment$p, `counter-set$p, `counter-reset$p — で作成され，操作される。 その結果は、［ `counter$f ／ `counters$f ］`関数-記法$から利用される。 ◎ A counter is a special numeric tracker used, among other things, to automatically number list items in CSS. Every element has a collection of zero or more counters, which are inherited through the document tree in a way similar to inherited property values. Counters have a name and creator, which identify the counter, a boolean reversed (false by default), and an integer value (optional when the counter is reversed). They are created and manipulated with the counter properties counter-increment, counter-set and counter-reset, and used with the counter() and counters() functional notations.
【 `逆順か$cTは、 ~HTMLの `reversed$a 属性による逆順~listを~supportするためにある。 】【† この仕様における “~counterの~instance” は、［ `作成元$cT, `名前$cT ］が互いに一致する`~counter$たちが成す集合を意味する （各~counterは、 実際には “各~count回” を表す）。 それらの~counterは、 `逆順か$cTも互いに一致する。 `作成元$cTは、 それらの~counterを最初に`~instance化$した要素を指す （~counterの`視野$も見よ）。 】
~counterは、 ~CSS構文においては `counter-name@t 型として記され，その名前を `custom-ident$t として表現する。 `counter-name$t は、 ~keyword `none^v には合致し得ない — そのような識別子は、 `counter-name$t としては`無効$になる。 ◎ Counters are referred to in CSS syntax using the <counter-name> type, which represents their name as a <custom-ident>. A <counter-name> name cannot match the keyword none; such an identifier is invalid as a <counter-name>.
`逆順に$される`~counter$は `reversed()^v `関数-記法$で作成される — それは、 次に従って定義される： ◎ A reversed counter is created with the reversed() functional notation, which is defined as follows:
`reversed-counter-name@t = reversed( `counter-name$t )
所与の要素の`~counter$の値は、 複数~段を経て解決される： ◎ Resolving counter values on a given element is a multi-step process:
- ~~先行する要素から既存の`~counterを継承する$。 ◎ Existing counters are inherited from previous elements.
- 新たな`~counterを~instance化する$（ `counter-reset$p ）。 ◎ New counters are instantiated (counter-reset).
- `~counter値$を増減する（ `counter-increment$p ）。 ◎ Counter values are incremented (counter-increment).
- `~counter値$を明示的に設定する（ `counter-set$p ）。 ◎ Counter values are explicitly set (counter-set).
- `~counter値$を利用する（ `counter$f ／ `counters$f ）。 ◎ Counter values are used (counter()/counters()).
~UAは、 `~counter値$を，実装に特有な［ 最大／最小 ］で制限してもヨイ。 `~counter$が［ `~instance化$／増減-／設定- 【！reset／set／increment】 ］されて，値がこの範囲から出た場合、 この範囲に切詰めるモノトスル。 ◎ UAs may have implementation-specific limits on the maximum or minimum value of a counter. If a counter reset, set, or increment would push the value outside of that range, the value must be clamped to that range.
【 この節における “要素” は、 一般に［ `before^pe ／ `after^pe ］疑似要素も含む（明示的に “要素または疑似要素” と記された箇所もあり，一貫でない）。 】
4.1. ~counterの作成-法： `counter-reset^p ~prop
◎名 `counter-reset@p ◎値 [ `counter-name$t `integer$t? | `reversed-counter-name$t `integer$t? ]+ | `none$v ◎初 `none$v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 ~keyword `none^v ／ ~list — ~listを成す各~itemは［［ 識別子 ／ `reversed()^v 関数 ］, 整数 ］が成す~pair ◎ the keyword none or a list, each item an identifier or a reversed() function paired with an integer ◎順 文法に従う ◎ア 算出された値~型による ◎表終~UAには、 視覚的でないものも含む すべての媒体に対し，この~propを~supportすることが期待される。 ◎ User agents are expected to support this property on all media, including non-visual ones.
`counter-reset$p ~propは、 要素~上で新たな`~counter$（たち）を`~instance化$して，指定された整数~値に設定する。 値は、 次に従って定義される： ◎ The counter-reset property instantiates new counters on an element and sets them to the specified integer values. Its values are defined as follows:
- `none@v
- 要素は、 新たな~counterを作成しない。 ◎ This element does not create any new counters.
- `counter-name$t `integer$t?
- 所与の ( `counter-name$t, `integer$t ) を ( `名前$cT, `値$cT ) に伴う`~counterを~instance化する$。 `integer$t が省略された場合の既定の`値$cTは、 `0^v になる。 ◎ Instantiates a counter of the given <counter-name> with a starting value of the given <integer>, defaulting to 0.
- `reversed-counter-name$t `integer$t?
- 所与の ( `counter-name$t, `integer$t ) を ( `名前$cT, `値$cT ) に伴う`逆順に$された`~counterを~instance化する$。 `integer$t が省略された場合 【の既定の`値$cTは、`~instance化$を見よ】。 ◎ Instantiates a reversed counter of the given <counter-name> with a starting value of the given <integer>, or no starting value if not given.
`~counter~prop$は、 `~cascade法$の規則に通常通り従うことに注意。 したがって、 例えば次の~stylesheetは： ◎ Note that counter properties follow the cascading rules as normal. Thus, due to cascading, the following style sheet:
h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }
`imagenum^v のみを設定し直すことになる。 両~counterとも設定し直すためには、 一緒に指定される必要がある： ◎ will only reset imagenum. To reset both counters, they have to be specified together:
H1 { counter-reset: section -1 imagenum 99 }
同じ原則は［ `counter-set$p ／ `counter-increment$p ］~propにも適用される。 `css-cascade-4$r を見よ。 ◎ The same principles apply to the counter-set and counter-increment properties. See [css-cascade-4].
`counter-reset$p の値に同じ `counter-name$t が複数回~生じた場合、 最後のもののみ尊守される。 ◎ If multiple instances of the same <counter-name> occur in the property value, only the last one is honored.
4.2. ~counter値の操作-法： `counter-increment^p, `counter-set^p ~prop
◎名 `counter-increment@p, `counter-set@p ◎値 [ `counter-name$t `integer$t? ]+ | `none$v ◎算 ~keyword `none^v ／ ~list — ~listを成す各~itemは［ 識別子, 整数 ］が成す~pair ◎表終他の欄は、 `counter-reset$p と同じ 【なので、この訳では省略する】。 ◎ Name: counter-increment Value: [ <counter-name> <integer>? ]+ | none Initial: none Applies to: all elements Inherited: no Percentages: n/a Computed value: the keyword none or a list, each item an identifier paired with an integer Canonical order: per grammar Animation type: by computed value type ◎ User agents are expected to support this property on all media, including non-visual ones. ◎ Name: counter-set Value: [ <counter-name> <integer>? ]+ | none Initial: none Applies to: all elements Inherited: no Percentages: n/a Computed value: the keyword none or a list, each item an identifier paired with an integer Canonical order: per grammar Animation type: by computed value type
~UAには、 視覚的でないものも含む すべての媒体に対し，これらの~propを~supportすることが期待される。 ◎ User agents are expected to support this property on all media, including non-visual ones.
［ `counter-increment$p ／ `counter-set$p ］~propは、 既存の`~counter$（たち）の値を操作する。 それに先立って、 要素~上に所与の`名前$cTの~counterが無い場合に限り，その名前の`~counterを~instance化する$。 値は、 次に従って定義される： ◎ The counter-increment and counter-set properties manipulate the value of existing counters. They only instantiate new counters if there is no counter of the given name on the element yet. Their values are defined as follows:
- `none^v
- 要素は、 どの~counterの値も改めない。 ◎ This element does not alter the value of any counters.
- `counter-name$t `integer$t?
-
要素の`名前$cT `counter-name$t の【`最内縁$な】~counterの`値$cTを：
- `counter-set$p の場合 ⇒ 指定された `integer$t — 省略-時の既定は `0^v — に設定する。
-
`counter-increment$p の場合 ⇒ 指定された `integer$t — 省略-時の既定は `1^v † — で増減する。
【† ［ ~counterの`逆順か$cT ~EQ ~T ］の場合、 既定は `-1^v になると思われる。 】
- 要素 %要素 に所与の名前 %名前 を伴う~counterが無い場合、 ~counterの値を［ 設定する／増減する ］に先立って，次を遂行するとする ⇒ `~counterを~instance化する$( %名前, %要素, 0 ) ◎ If there is not currently a counter of the given name on the element, the element instantiates a new counter of the given name with a starting value of 0 before setting or incrementing its value.
次の例に、 各 章／節を "第 1 章. ", "1.1 節. ", "1.2 節. ", 等々のように付番する仕方を示す。 ◎ This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.
h1::before {
content: "第 " counter(章) " 章. ";
counter-increment: 章; /*
章 に 1 を加算する
◎
Add 1 to chapter
*/
counter-reset: 節; /*
節 を 0 に設定する
◎
Set section to 0
*/
}
h2::before {
content: counter(章) "." counter(節) " 節. ";
counter-increment: 節;
}
~propの値に同じ `counter-name$t が複数回~生じた場合、 それらは，現れた順に処理される — すなわち ⇒＃ `counter-increment$p に対しては，~~累積される／ `counter-set$p に対しては，最後のもののみが効果を発揮する ◎ If multiple instances of the same <counter-name> occur in the property value, they are all processed, in order. Thus increments will compound, but only the last set value will take effect.
4.3. 入子な~counterと視野
~counterは、 同じ名前の~counterを入子にし得る。 ある要素~上で新たな`~counterを~instance化する$とき，要素が同じ名前の`~counter$を親から継承している場合には、 その名前の新たな~counterを作成して，既存の~counterの内側に入子にする。 これは、 ~HTMLにおける~listの様な状況~用に重要になる。 ~listは他の~listたちを任意な深さまで入子にし得るので、 各~level間で名前が一意な~counterを定義するのは不可能になる。 `counter$f 関数は、［ 要素の【`~counter集合$内で】所与の`名前$cTを伴う~counter ］のうち，`最内縁$なものに限り検索取得する。 一方で， `counters$f 関数は、 それらすべてを利用する。 【！that contain the element】 ◎ Counters are “self-nesting”; instantiating a new counter on an element which inherited an identically-named counter from its parent creates a new counter of the same name, nested inside the existing counter. This is important for situations like lists in HTML, where lists can be nested inside lists to arbitrary depth: it would be impossible to define uniquely named counters for each level. The counter() function only retrieves the innermost counter of a given name on the element, whereas the counters() function uses all counters of a given name that contain the element.
したがって，所与の`~counter$の `視野@ は、 その~counterを最初に`~instance化$した要素【すなわち，`作成元$cT】から開始し，その［ 子孫, 後続する同胞たち, それらの子孫 ］を含むが、［ 後続する同胞の `counter-reset$p により作成された，同じ名前を伴う~counter ］の視野に入る要素は含まない — そのように明示的に`~counterを~instance化する$ことで、 先行する同胞の~counterを隠蔽できることになる。 ◎ The scope of a counter therefore starts at the first element in the document that instantiates that counter and includes the element’s descendants and its following siblings with their descendants. However, it does not include any elements in the scope of a counter with the same name created by a counter-reset on a later sibling of the element, allowing such explicit counter instantiations to obscure those earlier siblings.
各~counterとその値の視野を統治する正確な規則については、 `§ ~counterの作成-法と継承-法＠#creating-counters$ を見よ。 ◎ See § 4.4 Creating and Inheriting Counters for the exact rules governing the scope of counters and their values.
次の~codeは、
入子な~list~itemたちを付番する。
その結果は、［
`li$e 要素~上に
`display^p: `list-item^v; `list-style$p: `inside^v
を設定したとき
］の付番とよく似る：
◎
The following code numbers nested list items. The result is very similar to that of setting display:list-item and list-style: inside on the LI element:
ol { counter-reset: item }
li { display: block }
li::before { content: counter(item) ". "; counter-increment: item }
この例では、 各 `ol$e は~counterを作成する — `ol^e の子は、 すべての その~counterを指すことになる。 ◎ In this example, an ol will create a counter, and all children of the ol will refer to that counter.
%n 番目（ 0 から数える）に`~instance化$される名前 `item^v の~counterを `n^item と表記するならば、 次の~HTML片は，各箇所に指示される~counterを利用することになる。 ◎ If we denote the nth instance of the item counter by itemn, then the following HTML fragment will use the indicated counters.
4.4. ~counterの作成-法と継承-法
【 この節に定義される~modelにおいては、［ `before^pe ／ `after^pe ］疑似要素は，その`出自の要素$の［ 最初の子／最後の子 ］であると見做す必要があると思われる。 （~counterは~box~treeに対し演算するべきとも示唆されている： `674$issue ） 】
文書~内の各［ 要素／疑似要素 ］は — 先行する要素から継承するか, 要素~上で直に~instance化することを通して — その要素を`視野$に入れる`~counter$の集合を持つ（空にもなり得る）。 これらの~counterは、 `有順序~集合$†を成す `~counter集合@ （ `CSS counters set^en ）として表現される。 この集合を成す各~itemは、 ( `文字列$, 要素, 真偽値, 整数 ) からなる`~tuple$であり，~counterの ( `名前$cT, `作成元$cT, `逆順か$cT, `値$cT ) を順に表現する。 所与の名前 %N に対し，この集合~内の~itemのうち［ `名前$cT ~EQ %N ］を満たす最後のものが，名前 %N の `最内縁@ な~counterを表現する。 ◎ Each element or pseudo-element in a document has a (possibly empty) set of counters in the scope of that element, either through inheritance from another element or through instantiation on the element directly. These counters are represented as a CSS counters set, which is a set whose values are each a tuple of: a string (representing a counter’s name), an element (representing the counter’s creator), a boolean (representing whether the counter is reversed), and optionally an integer (representing the counter’s value). The latest counter of a given name in that set represents the innermost counter of that name.
【† 同等性の検査を要する箇所は無いので、 実際には`~list$と見做せる。 各~itemは、 常に別な個を成す — それらの同等性が~tupleを成す成分ごとの比較に基づくわけではない。 】
4.4.1. ~counterの継承-法
要素は、 自身の初期`~counter集合$を，要素の直前の同胞と親から`継承-$する。 次に，それらの~counter用の`値$cTを［ `~tree順序$で要素の直前にある要素（親, 直前の同胞, 直前の同胞の子孫, いずれもあり得る） ］の合致している~counterから得る。 ◎ An element inherits its initial set of counters from its parent and preceding sibling. It then takes the values for those counters from the values of the matching counters on its preceding element in tree order (which might be its parent, its preceding sibling, or a descendant of its previous sibling).＼
所与の %要素 の中へ `~counterを継承する@ ときは： ◎ To inherit counters into an element:
【 この~algoは、 ~boxを生成しない要素を文書~treeから予め除外した上で適用することになる。 また、 `~tree順序$で %要素 に先行する要素の`~counter集合$は，すでに算出-済みであるものと見做す。 】
- %~counter集合 ~SET 新たな`有順序~集合$ ◎ ↓
- %要素 の`~counter集合$ ~SET %~counter集合 ◎ ↓
- ~IF［ %要素 は`~tree順序$で最初の要素である ］ ⇒ ~RET （ %要素 は文書~treeの根~要素であり，何も継承しないので、 その`~counter集合$は空になる） ◎ If element is the root of its document tree, the element has an initially-empty CSS counters set. Return.
- %要素 の親~要素の`~counter集合$を成す ~EACH( %~counter ) に対し ⇒ %~counter集合 に %~counter の複製を付加する ◎ Let element counters, representing element’s own CSS counters set, be a copy of the CSS counters set of element’s parent element.
- ~IF［ %要素 の`直前の同胞？$ ~NEQ ~NULL ］ ⇒ %要素 の`直前の同胞？$の`~counter集合$を成す ~EACH( %~counter ) に対し ⇒ ~IF［ %~counter集合 内に %~counter と同じ`名前$cTを伴う`~counter$は無い ］ ⇒ %~counter集合 に %~counter の複製を付加する ◎ Let sibling counters be the CSS counters set of element’s preceding sibling (if it has one), or an empty CSS counters set otherwise. ◎ For each counter of sibling counters, if element counters does not already contain a counter with the same name, append a copy of counter to element counters.
- `~tree順序$で %要素 の直前にある要素の`~counter集合$を成す ~EACH( %~counter ) に対し ⇒ ~IF［ %~counter集合 内に［ %~counter と［ 同じ`名前$cT, 同じ`作成元$cT ］を伴う`~counter$は在る ］ ⇒ その~counterの`値$cT ~SET %~counter の`値$cT ◎ Let value source be the CSS counters set of the element immediately preceding element in tree order. ◎ For each source counter of value source, if element counters contains a counter with the same name and creator, then set the value of that counter to source counter’s value.
例として，次の~codeを~~考える： ◎ Take the following code as an example:
<ul style="counter-reset: example 0;">
<li id="`foo^css" style="counter-increment: example;">
foo
<div id="`bar^css" style="counter-increment: example;">bar</div>
</li>
<li id="`baz^css">
baz
</li>
</ul>
ここでは、 `ul$e 要素 %ul は，名前 `example^v を伴う新たな~counterを確立してから，その値を 0 に設定する。 要素 `#foo^css は、 %ul の最初の子なので， %ul の~counterを継承する。 `~tree順序$で直前にある要素も %ul なので、 ~counterの値として %ul のそれ（ 0 ）を同時に継承し，その値を即時に増減する結果、 値は 1 になる。 ◎ Recall that tree order turns a document tree into an ordered list, where an element comes before its children, and its children come before its next sibling. In other words, for a language like HTML, it’s the order in which the parser encounters start tags as it reads the document. ◎ In here, the ul element establishes a new counter named example, and sets its value to 0. The #foo element, being the first child of the ul, inherits this counter. Its parent is also its immediately preceding element in tree order, so it inherits the value 0 with it, and then immediately increments the value to 1.
同じことは、 要素 `#bar^css にも起こる。 `#bar^css は、 `#foo^css から名前 `example^v ~counterを継承すると同時に, 値 1 も継承して，それを増減する結果、 値は 2 になる。。 ◎ The same happens with the #bar element. It inherits the example counter from #foo, and inherits the value 1 from it as well and increments it to 2.
しかしながら，要素 `#baz^css は少し異なる。 それは、 名前 `example^v の~counterを直前の同胞 `#foo^css から継承するが、 値は， `#foo^css からは継承せず，`~tree順序$で直前にある要素 `#bar^css から継承する。 ◎ However, the #baz element is a bit different. It inherits the example counter from the #foo element, its previous sibling. However, rather than inheriting the value 1 from #foo along with the counter, in inherits the value 2 from #bar, the previous element in tree order.
この挙動により、 作者は，単独の~counterを［ 文書~全体を通して，継続的に増減する ］ために利用できるようになる — 入子な文書~構造について気にかけることなく。 ◎ This behavior allows a single counter to be used throughout a document, continuously incrementing, without the author having to worry about the nested structure of their document.
注記： ~counterの継承は、 定例の`~CSS継承$の様に， `DOM$r の文脈における “平坦~化された要素~tree” 【`参照＠~CSSSCOPING#flat-tree$】 に対し演算する。 ◎ Note: Counter inheritance, like regular CSS inheritance, operates on the “flattened element tree” in the context of the [DOM].
4.4.2. ~counterの~instance化
所与の`名前$cTを伴う`~counter$は、 次のいずれかに該当する要素~上で`~instance化$される：
- `counter-reset$p にて，その名前が与えられている。
- ［ `counter-increment$p ／ `counter-set$p ］~propにて, あるいは［ `counter$f ／ `counters$f ］関数-記法にて，その名前が与えられたが、 当の要素~上には，その名前の~counterは無いとき。
（新たに`~instance化$された`~counter$は、 それと`名前$cTが一致する`~counter$のうち［ 先行する同胞を`作成元$cTとするものが在れば，それを置換する一方で、 先祖~要素を`作成元$cTとするものが在れば，それに加えて追加される ］。 `§ 入子な~counterと視野＠#nested-counters$ を見よ。） ◎ (Newly instantiated counters replace identically-named counters originating from previous siblings, but are added in addition to identically-named counters originating from ancestor elements, see § 4.3 Nested Counters and Scope.)＼
`~counterを~instance化する@ ときは、 所与の ( %名前, %要素, %逆順か（省略時は ~F ）, %値（省略時は ε ） ) に対し： ◎ To instantiate a counter of a given name on an element, optionally reversed, with an optional starting value:
- %~counter集合 ~LET %要素 の`~counter集合$ ◎ Let counters be element’s CSS counters set.
- %最内縁な~counter ~LET %~counter集合 内の`名前$cT %名前 を伴う`最内縁$な~counter ◎ Let innermost counter be the last counter in counters with the name name.＼
- ~IF［ %最内縁な~counter の`作成元$cT【！originating element】は %要素 に先行するある同胞である 【！ a previous sibling = one of preceding siblings ≠ the previous sibling 】 ］ ⇒ %~counter集合 から %最内縁な~counter を`除去する$ ◎ If innermost counter’s originating element is element or a previous sibling of element, remove innermost counter from counters.
- %~counter ~LET 新たな`~counter$( %名前, %要素, %逆順か, %値 ) ◎ ↓
- ~IF［ %値 ~EQ ε ］ ⇒ %~counter の`値$cT ~SET %逆順か に応じて ⇒＃ ~F ならば 0 ／ ~T ならば 【下の~algoを見よ】
- %~counter集合 に %~counter を`付加する$set ◎ Append a new counter to counters with name name, originating element element, reversed being reversed, and initial value value (if given)
［ %逆順か ~EQ ~T ］~AND［ %値 ~EQ ε ］が与えられた下で~counterを`~instance化$するときは、 ~UAは，当の~counter %~counter の`値$cTを~layout時点に次の~algoが返す値になるよう動的に計算する†モノトスル： ◎ When a counter is instantiated without an initial value, the user agent must dynamically calculate the initial value at layout-time to be the value returned by the following algorithm:
【† 最初に，上の~algoを %逆順か ~EQ ~F と見做す下で適用することにより、 文書~内の すべての~counterを~instance化してから、［ `逆順か$cT ~EQ ~T ］なる各~counterについて，個別に`値$cTを計算し直す必要がある。 】
- %N ~LET ε ◎ Let num be 0. ◎ Let first be true.
-
%~counter と同じ`視野$に入る 【同じ［ `名前$cT, `作成元$cT ］を`最内縁$な`~counter$として伴う】 ~EACH( 要素または疑似要素 %E ) ］に対し，【`~tree順序$で】： ◎ For each element or pseudo-element el that increments or sets the same counter in the same scope:
- %increment ~LET %E の `counter-increment$p で %~counter の`値$cTが増減される量（増減されないならば 0 ） ◎ Let incrementNegated be el’s counter-increment integer value for this counter, multiplied by -1.
- ~IF［ %N ~EQ ε ］ ⇒ %N ~SET 0 ~MINUS %increment ◎ If first is true, then add incrementNegated to num and set first to false.
- ~IF［ %E の `counter-set$p は %~counter の`値$cTを設定する ］ ⇒＃ %N ~INCBY %~counter の`値$cTに設定される整数； ~BREAK ◎ If el sets this counter with counter-set, then add that integer value to num and break this loop.
- %N ~DECBY %increment ◎ Add incrementNegated to num.
- ~RET %N ◎ Return num.
注記： ~counterは、 `逆順に$されたものに限り，初期~値を伴わずに~instance化される。 ◎ Note: Only reversed counters can be instantiated without an initial value.
4.4.X. ~counterの生きた例
【 この節は、 この訳による追加。 】
次の図式に、 この仕様の~algoを要素~treeに適用して生成される，ある固定的な`名前$cTを伴う~counterの挙動を示す（図式のどこでも，~clickすれば、 ~tree構造をランダムに組み替えれる） （`逆順に$された~counterは未~support）：
（
`ex-counter-tree@この図式の呈示には、 次の~styleが利用されている（ `#root^css は容器の id ／ %N は~counterの名前 ）：
#root * {
display: block;
border-left: groove #EEE 1em; /* 入子ng深さを表す “字下げ” */
}
#root *::before {
content: "(" counters(%N, ".") ") = ";
color: red;
}
#root *.reset { counter-reset: %N; }
#root *.increment { counter-increment: %N; }
#root *.set { counter-set: %N 10; }
この図式の見方は：
- 図式を成す各~行が 1 個の子孫に対応し，入子ng~levelに応じて字下げされている。
- 行頭に赤く呈示される括弧で括られた整数~列は， `counters$f 関数の出力であり、 利用-中な~UAが実際に要素にあてがっている，~counter値の~list — 要素の`~counter集合$内の，名前 %N を伴う~counterたちの`値$cTからなる同順の~list — を反映する。
- その次に “=” を挟んで示される，括弧で括られた整数~列は、 この仕様の~modelから導出される，~counter値の~listを表す。 ~UAの実装が~modelに正確に従うならば、 前項の整数~列とこの整数~列は，一致するはずである… が、 `~counterを継承する$~algoが更新されたため（ `5477$issue ），一致しない~UAもあるかもしれない（図式~直前のチェックボックスで，過去の仕様に切り替えられる）。 加えて、 現在の仕様に従うよう更新された~UA（具体的には Firefox ）においても，ある種の事例で一致していない場合が生じている。
-
行末に示される文字列［ "reset" ／ "increment" ／ "set" ］は、 同じ名前の~class名を通して，当の要素に`名前$cT %N を伴う~counterを操作する［ `counter-reset$p ／ `counter-increment$p ／ `counter-set$p ］~propがあてがわれていることを表す ⇒＃ `counter-reset$p が設定する値は、常に 0 （既定~値）／ `counter-increment$p による増減は、常に 1 （既定~値） `counter-set$p が設定する値は、常に 10
ただし，既定では、 `counter-set$p は利用されない — 現時点では、 ~supportする~UAが限られているので （図式~直前のチェックボックスで切り替えられる）。
最初の子~要素には、 常に `counter-reset$p が設定される — 呈示に利用している［ `before^pe 疑似要素の `couters^f 関数 ］の~~存在による，暗黙的な`~instance化$の副作用により、 挙動が不規則な~~見かけになるのを避けるため。
【 `~counterを継承する$~algoは、 過去の仕様においては，次のようになっていた — 現時点（ 2021年 6月）では、 この挙動に基づく~UAもある： 】
- %要素 の`~counter集合$ ~SET 新たな`有順序~集合$ ◎ Let element counters be an initially empty CSS counters set representing element’s own CSS counters set.
- ~IF［ %要素 は`~tree順序$で最初の要素である ］ ⇒ ~RET （ %要素 は根~要素であり，何も継承しないので、 `~counter集合$は空になる） ◎ If element is the root of its document tree, return. (The element has an initially-empty counter map and inherits nothing.)
- %~counter~source ~LET ［ %要素 の`直前の同胞？$ ~NEQ ~NULL ならば それ／ ~ELSE_ %要素 の`親$ ］の`~counter集合$ ◎ Let counter source be the CSS counters set of element’s preceding sibling, if it has one, or else of element’s parent if it does not.
- %値~source ~LET ［ `~tree順序$で %要素 の直前にある要素 ］の`~counter集合$ ◎ Let value source be the CSS counters set of the element immediately preceding element in tree order.
- %値~source を成す ~EACH( `~counter$ %~counter ) に対し ⇒ ~IF［ %~counter~source 内に %~counter と［ 同じ`名前$cT, 同じ`作成元$cT ］を伴う`~counter$は在る ］ ⇒ %要素 の`~counter集合$に %~counter の複製を`付加する$set ◎ For each (name, originating element, value) of value source: • If counter source also contains a counter with the same name and originating element, then append a copy of value source’s counter (name, originating element, value) to element counters.
4.5. ~boxを生成しない要素における~counter
~boxを生成しない要素 （例： `display$p が `none＠~CSSDISP#valdef-display-none$v に設定された要素 ／ `content$p が `none$v2 に設定された疑似要素） は、 `~counter$を操作できない — `~counter~prop$は、 そのような要素でも依然として妥当であるが，それらによる効果はないモノトスル。 ◎ An element that does not generate a box (for example, an element with display set to none, or a pseudo-element with content set to none) cannot set, reset, or increment a counter. The counter properties are still valid on such an element, but they must have no effect.
例えば次の~stylesheetでは、 `secret^css ~classのどの `h2^e も， `count2^v を増減しなくなる。 ◎ For example, with the following style sheet, H2s with class "secret" do not increment count2.
h2 { counter-increment: count2; }
h2.secret { display: none; }
注記： `visibility$p を `hidden^v に設定するなどの，要素を “隠す” だけのものは、 要素に~boxを生成させるので，このことは該当しない。 ◎ Note: Other methods of “hiding” elements, such as setting visibility to hidden, still cause the element to generate a box, and so are not excepted here.
`置換され$る子孫（例： ~HTMLの `option$e ／ ~SVGの `rect$e ）が~counterを操作できるかどうかは、 未定義である。 【！set, reset, or increment】 ］ ◎ Whether a replaced element’s descendants (such as HTML option, or SVG rect) can set, reset, or increment a counter is undefined.
注記： `置換され$る子孫~要素の挙動は、 各~実装~間の相互運用能を欠くことに因り，現時点では未定義である。 ◎ Note: The behavior on replaced element descendants is currently undefined due to a lack of interoperability across implementations.
4.6. 暗黙的な `list-item^v ~counter
作者が~style内に明示的に記して定義された`~counter$に加えて、 `~list~item$は，特別な `list-item@v ~counter — `名前$cT `list-item^v を伴う`~counter$ — を自動的に増分する。 それは、 `~list~item$上の既定の`~marker文字列$を生成するために利用される（ `list-style-type$p を見よ）。 ◎ In addition to any explicitly defined counters that authors write in their styles, list items automatically increment a special list-item counter, which is used when generating the default marker string on list items (see list-style-type).
特定的には — `counter-increment$p ~propにて， `list-item$v ~counter用に異なる増分が明示的に指定されない限り — 各`~list~item$ごとに，`~counter$が通常に増分される時点で、 その`逆順か$cTに応じて［ ~F ならば 1 ／ ~T ならば −1 ］だけ増分されるモノトスル（ちょうど，`~list~item$の `counter-increment$p の値に［ `list-item 1^v ／ `list-item -1^v ］が付加されていたかのように — 場合によっては、 新たな`~counter$を`~instance化$するなどの副作用も伴う）。 これは、 `counter-increment$p の［ `指定d値$／`算出d値$ ］には影響しない。 ◎ Specifically, unless the counter-increment property explicitly specifies a different increment for the list-item counter, it must be incremented by 1 on every list item, or if the counter is reversed, it must be incremented by -1 on every list item instead, at the same time that counters are normally incremented (exactly as if the list item had list-item 1 or list-item -1 appended to their counter-increment value, including side-effects such as possibly instantiating a new counter, etc). This does not affect the specified or computed values of counter-increment.
各`~list~item$は，`list-item$v ~counterを自動的に 1 ずつ増分するので、 連続な［ 数量- `list-style-type$p を伴う【すなわち， `counter-style$t が指定されている】`~list~item$ ］たちは，既定では連続的に付番されることになる — 作者が `counter-increment$p に `list-item^v を設定していなくても，あるいは `none^v を設定していようが。 【！another value = `list-item^v 以外】 これは、 他の`名前$cTの~counter用を意図した宣言が，【 `list-item^v を欠くことにより】自動的な `list-item^v ~counterを不作為に上書きしないよう保護する。 ◎ Because each list item automatically increments the list-item counter by 1, consecutive list items with a numeric list-style-type will be consecutively numbered by default—even if the author sets counter-increment to another value such as counter-increment: itemnumber or even none. This protects the automatic list-item counter from inadvertently being overridden by declarations intended to address other counters.
しかしながら，この `list-item$v に対する自動的な増分は、
当の`~list~item$の `counter-increment$p に `list-item$v が明示的に付与されている場合には，`起こらない^emので、
例えば
li { `counter-increment^p: `list-item 2^v; }
は，指定されたとおり `list-item^v を 2 だけ増分することになる
— 無条件に `list-item 1^v を付加したとするときの 3 ではなく。
◎
However, since the automatic list-item increment does not happen if the list item’s counter-increment explicitly mentions the list-item counter, li { counter-increment: list-item 2; } will increment list-item by 2 as specified, not by 3 as would happen if list-item 1 were unconditionally appended.
これにより、
`list-item$v ~counterの自動的な増分を切ることも可能になる
— `counter-increment$p: `list-item 0^v;
のように明示的に上書きして。
◎
This also allows to turn off the automatic list-item counter increment, by overriding it explicitly, e.g. counter-increment: list-item 0;.
他のすべてに関しては、 `list-item$v `~counter$は，他の`~counter$と同様に挙動する。 作者は、 その~styleを調整する その他の目的に，`~list~item$を利用したり操作できる。 ◎ In all other respects, the list-item counter behaves like any other counter and can be used and manipulated by authors to adjust list item styling or for other purposes.
次の例では、 ~listは 2 ずつ数えるよう改変されている： ◎ In the following example, the list is modified to count by twos:
ol.evens > li { counter-increment: list-item 2; }
~listが 3 個の~itemからなるなら、 次のように描画されることになる： ◎ A three-item list would be rendered as
2. 一個目の~item 4. 二個目の~item 6. 三個目の~item
~UAおよび~host言語は、［ ~UA~stylesheet／呈示~用~hint用の~style対応付け ］において ~list~itemの~style付けを設定しておくときに， `list-item$v ~counter値が［ ~host言語~意味論に規定される下層の数量-値 ］を既定で反映することを確保するベキである。 例： `§ ~HTML用の見本~stylesheet＠#ua-stylesheet$ 【！#ua-stylsheet】 を見よ。 ◎ UAs and host languages should ensure that the list-item counter values by default reflect the underlying numeric value dictated by host language semantics when setting up list item styling in their UA style sheet and presentational hint style mappings. See, e.g. Appendix A: Sample Style Sheet For HTML.
次の例では、 `content$p ~propを利用して `list-item$v ~counterの中へ~hookする~~階層的な付番を作成する — したがって~HTMLを通して~~課された付番~変更 【すなわち， `value^a, `start^a, `reversed^a 属性】 があれば それを尊重する： ◎ In the following example, the content property is used to create tiered numbering that hooks into the list-item counter, and thus respects any numbering changes inflicted through HTML:
ol > li::marker { content: counters(list-item,'.') '.'; }
この規則を利用している入子な~listは、 次の様に描画されることになる： ◎ Nested lists using this rule would be rendered like
1. 一個目の第一~level~item
5. 二個目の第一~level~item（ value=5 ）
5.3. 一個目の第二~level~item（~listの start=3 ）
5.4. 二個目の第二~level~item（~listの start=3 ）
5.4.4. reversed ~list内の一個目の第三~level~item
5.4.3. reversed ~list内の二個目の第三~level~item
5.4.2. reversed ~list内の三個目の第三~level~item
5.4.1. reversed ~list内の四個目の第三~level~item
5.5. 三個目の第二~level~item（~listの start=3 ）
6. 三個目の第一~level~item
次のような~markupが与えられたときには： ◎ given markup such as
<ol>
<li>一個目の第一~level~item
<li value=5>二個目の第一~level~item（ value=5 ）
<ol start=3>
<li>一個目の第二~level~item（~listの start=3 ）
<li>二個目の第二~level~item（~listの start=3 ）
<ol reversed>
<li>reversed ~list内の一個目の第三~level~item
<li>reversed ~list内の二個目の第三~level~item
<li>reversed ~list内の三個目の第三~level~item
<li>reversed ~list内の四個目の第三~level~item
</ol>
<li>三個目の第二~level~item（~listの start=3 ）
</ol>
<li>三個目の第一~level~item
</ol>
<ol>
4.7. ~counterの出力-法： `counter^f, `counters^f 関数
`~counter$それ自体は可視~効果を伴わないが、 それらの値は［ `counter$f ／ `counters$f ］関数で利用できる — その`使用~値$は、 `~counter値$を文字列や画像として表現し，次に従って定義される： ◎ Counters have no visible effect by themselves, but their values can be used with the counter() and counters() functions, whose used values represent counter values as strings or images. They are defined as follows:
`counter@t = `counter()$t | `counters()$t `counter@f = counter( `counter-name$t, `counter-style$t? ) `counters@f = counters( `counter-name$t, `string$t, `counter-style$t? )
ここで `counter-style$t は、 `~counter表現を生成-$するための`~counter~style$を指定する。 `css-counter-styles-3$r ◎ where <counter-style> specifies the counter style for generating a representation of the named counter(s) as defined in [css-counter-styles-3] and
- `counter^f
- `counter-style$t を利用して，［ 要素の`~counter集合$内の名前 `counter-name$t の`最内縁$な`~counter$の`値$cT ］用の`~counter表現を生成-$した結果を表現する。 ◎ Represents the value of the innermost counter in the element’s CSS counters set named <counter-name> using the counter style named <counter-style>.
- `counters^f
-
次を走らせた結果を表現する：
- %L ~LET 新たな~list
- 要素の`~counter集合$内の ~EACH( 名前 `counter-name$t の`~counter$ %~counter ) に対し ⇒ %L に次の結果を`付加する$ ⇒ `counter-style$t を利用して［ %~counter の`値$cT ］用の`~counter表現を生成-$する
- ~RET %L を `string$t で`連結する$
両~事例とも，`counter-style$t 引数が省略された場合、 `decimal$v が既定になる。 ◎ In both cases, if the <counter-style> argument is omitted it defaults to decimal.
注記： `counter-style$t が`disc$v 様な定義済みな記号的~styleである場合、 `list-style-type$p にて利用されるときとは，見かけが異なるかもしれない。 `CSS-COUNTER-STYLES-3$r `§ 記号的~counter~style＠~CSSCOUNTER#simple-symbolic$ を見よ。 ◎ Note: If the <counter-style> is one of the predefined symbolic styles, like disc, it might look different than when used in list-style-type. See CSS Counter Styles 3 § 6.3 Symbolic: disc, circle, square, disclosure-open, disclosure-closed.
［ `counter$f ／ `counters$f ］が利用された所で，要素の`~counter集合$内に名前 `counter-name$t の`~counter$は存在しない場合、 次を遂行しておく ⇒ `~counterを~instance化する$( その名前, 要素, `0^v ) ◎ If no counter named <counter-name> exists on an element where counter() or counters() is used, one is first instantiated with a starting value of 0.
H1::before { content: counter(章, upper-latin) ". " }
/*
"A. A History of Discontent"
の様な見出しを生成する。
◎
Generates headings like "A. A History of Discontent"
*/
H2::before { content: counter(節, upper-roman) " - " }
/*
"II - The Discontent Part"
の様な見出しを生成する。
◎
Generates headings like "II - The Discontent Part"
*/
BLOCKQUOTE::after { content: " [" counter(引用, decimal) "]" }
/*
"... [3]"
で終端する様な引用~塊を生成する
◎
Generates blockquotes that end like "... [3]"
*/
DIV.note::before { content: counter(notecntr, disc) " " }
/*
単純に，どの `div.note^css の前にも~bulletを生成する
◎
Simply generates a bullet before every div.note
*/
P::before { content: counter(p, none) }
/*
何も挿入しない
◎
inserts nothing
*/
`counters$f 関数の単純な利用を次の例に示す： ◎ The following example shows a simple use of the counters() function:
<ul>
<li>一</li>
<li>二
<ul>
<li>入子な一</li>
<li>入子な二</li>
</ul>
</li>
<li>三</li>
</ul>
<style>
li::marker { content: '(' counters(list-item,'.') ') '; }
</style>
前掲の文書は、 次の様に描画されるべきである： ◎ The preceding document should render something like this:
(1) 一 (2) 二 (2.1) 入子な一 (2.2) 入子な二 (3) 三
各~counterは、 後続の同胞に継承されるので，入子な~~関係にない見出しと下位~見出しを付番するときにも利用できる。 あいにく，これは、 `counters$f には利用できない — 同胞たちの~counterは入子にされないので。 代わりに，複数の~counter名を手動で連結することで可能になる： ◎ Because counters inherit to siblings as well, they can be used to number headings and subheadings, which aren’t nested within each other. Unfortunately, this prevents the use of counters() as counters from siblings don’t nest, but one can create multiple counters and manually concatenate them instead:
<h1>一個目の H1</h1>
...
<h2>H1 の中の一個目の H2</h2>
...
<h2>H1 の中の二個目の H2</h2>
...
<h3>H2 の中の一個目の H3</h3>
...
<h1>二個目の H1</h1>
...
<h2>一個目の H2</h2>
...
<style>
body { counter-reset: h1 h2 h3; }
h1 { counter-increment: h1; counter-reset: h2 h3;}
h2 { counter-increment: h2; counter-reset: h3; }
h3 { counter-increment: h3; }
h1::before { content: counter(h1,upper-alpha) '. '; }
h2::before { content: counter(h1,upper-alpha) '.'
counter(h2,decimal) '. '; }
h3::before { content: counter(h1,upper-alpha) '.'
counter(h2,decimal) '.'
counter(h3,lower-roman) '. '; }
</style>
前掲の文書は、 次の様に描画されるべきである： ◎ The preceding document should render something like this:
A. 一個目の H1 ... A.1. H1 の中の一個目の H2 ... A.2. H1 の中の二個目の H2 ... A.2.i. H2 の中の一個目の H3 ... B. 二個目の H1 ... B.1. H1 の中の一個目の H2 ...
~counterは、 印刷ng~marker以外のものにもときどき有用になる。 それは一般に，一連の要素を付番する能を供し、 他の~propを参照するときにも有用になり得る。 例えば `order$p を利用して，要素を他の 2 つの特定の要素の合間に置くためには、 現在では，欲される挿入点の前／後にある要素ごとに `order$p を明示的に与えることが要求される。 どの `order$p 値にも~counterを設定できれば、 より容易に，要素を 任意な他の 2 つの合間の~~地点に挿入できる。 ◎ Counters are sometimes useful for things other than printing markers. In general, they provide the ability to number elements in sequence, which can be useful for other properties to reference. For example, using order to put an element between two other specific elements currently requires you to explicitly put order on every element before and/or after the desired insertion point. If you can set the order value of everything to a counter, tho, you can more easily insert an element into an arbitrary spot between two others.
他にも、 入子な, あるいは同胞どうしの要素に，少しずつ異なる変形を与える利用事例がある。 今日，これを適度な仕方で行うためには前処理器を利用する必要があるが、 ~counterを使えば “素な” ~CSSでも上手く働くようになる。 ◎ Other use-cases involve nested or sibling elements with transforms that are meant to be slightly different from each other. Today you have to use a preprocessor to do this in a reasonable way, but a counter would make it work well in "plain" CSS.
（入子な事例については、 今日では，`~custom~prop$と多段に入子にされた `calc$f を利用すれば，一連の値を築けるが、 これはちょっとぶかっこうになることに加え，同胞に対しては働かない。） ◎ (You can built up successive values in the nested case today by using custom properties and stacking up nested calc()s, but this is a *little bit* clumsy, and doesn’t work for siblings.)
有名~counterの値を文字列ではなく整数として返す
counter-value(`counter-name$t)
関数の追加が示唆されている。
◎
Suggestion is to add a counter-value(<counter-name>) function, which returns the value of the named counter as an integer, rather than returning a string.
`1026$issue を見よ。 ◎ See Issue 1026.
~HTML用の見本~stylesheet
◎非規範的 【！This section is informative, not normative.】~HTML~listに適用される既定の~propは、 `HTML$r の `§ 具現化：~list＠~HTMLrendering#lists$ が規範的に定義する。 この見本~stylesheetは、 当の~CSS特能を，馴染みの~markup規約を利用して~~説明するために供されている。 ◎ The [HTML] Rendering chapter defines the normative default properties that apply to HTML lists; this sample style sheet is provided to illustrate the CSS features using familiar markup conventions..
/*
~list~itemたちを設定しておく
◎
Set up list items
*/
li {
display: list-item;
/* これは、
`counter-increment^p: `list-item^v;
も課す
◎
implies 'counter-increment: list-item'
*/
}
/*
`list-item^v ~counterが `ol^e ／ `ul^e の視野に入るよう設定しておく
◎
Set up ol and ul so that they scope the list-item counter
*/
ol, ul {
counter-reset: list-item;
}
/*
~list用の既定の~list~style型
◎
Default list style types for lists
*/
ol { list-style-type: decimal; }
ul { list-style-type: toggle(disc, circle, square); }
/*
`ol^e ／ `ul^e 要素の `type^a 属性
◎
The type attribute on ol and ul elements
*/
ul[type="disc"] { list-style-type: disc; }
ul[type="circle"] { list-style-type: circle; }
ul[type="square"] { list-style-type: square; }
ol[type="1"] { list-style-type: decimal; }
ol[type="a"] { list-style-type: lower-alpha; }
ol[type="A"] { list-style-type: upper-alpha; }
ol[type="i"] { list-style-type: lower-roman; }
ol[type="I"] { list-style-type: upper-roman; }
/*
`ol^e 要素の `start^a 属性
◎
The start attribute on ol elements
*/
ol[start] {
counter-reset: list-item calc(attr(start integer, 1) - 1);
}
/*
`li^e 要素の `value^a 属性
◎
The value attribute on li elements
*/
li[value] {
counter-set: list-item attr(value integer, 1);
}
/*
逆順な~listの取扱い
◎
Handling reversed lists
*/
ol[reversed] {
counter-reset: reversed(list-item);
}
ol[reversed][start] {
counter-reset: reversed(list-item) calc(attr(start integer) + 1);
}
/*
~box~model規則
◎
Box Model Rules
*/
ol, ul {
display: block;
margin-block: 1em;
marker-side: match-parent;
padding-inline-start: 40px;
}
ol ol, ol ul, ul ul, ul ol {
margin-block: 0;
}
li {
text-align: match-parent;
}
謝辞
変更点
この節では、 以前の公表版からの変更点を文書化する。 ◎ This section documents the changes since previous publications.
- `2020年 7月 9日 作業草案＠~TR/2020/WD-css-lists-3-20200709/$ からの変更点 ◎ Changes since the 9 July 2020 WD
- ［ `marker$pe ~box／その内容 ］に適用される~propについて、 どちらに適用されるかも含めて，明確化した。 （ `4568$issue ） ◎ Clarified properties that apply to ::marker boxes vs. to the contents of ::marker boxes. (Issue 4568)
- ~UAの既定の~stylesheetに， `marker$pe 用の `text-transform$p ~propを追加した。 （ `4206$issue ） ◎ Added text-transform: none to the UA default style sheet for ::marker. (Issue 4206)
- ~counterの継承を変更した — 最初に親からとり、 新たな~counterである場合に限り，直前の同胞からとるよう。 （ `5477$issue ） ◎ Changed counter inheritance to take from the parent first, and only take from the sibling if it’s a new counter. (Issue 5477)
- `2019年 8月 17日 作業草案＠~TR/2019/WD-css-lists-3-20190817/$ からの変更点 ◎ Changes since the 17 August 2019 WD
- `outside$v ~list~markerは`塊~容器$になるものと指定した。 （その`外縁~表示~型$は、 未定義であり続ける。） ◎ Specified that outside list markers block containers. (Their outer display type remains undefined.)
- `marker$pe に適用される~propの~listを `CSS-PSEUDO-4$r から取り込んだ上で，［ ~animation／遷移／ `white-space$p ］~propを追加した。 ◎ Stole list of properties applying to ::marker from [CSS-PSEUDO-4] and added animations, transitions, and white-space.
- `marker$pe 用の~UA既定の~stylesheetに `white-space:pre$p を追加した （ `4448$issue ） しかしながら，~marker~boxにおける空白~処理の正確な挙動は、 依然として作業-中にあることに注意。 ◎ Added white-space: pre to UA default style sheet for ::marker. (Issue 4448) Note, however, that the exact white space processing behavior of marker boxes is still being worked out.
- `2019年 4月 25日 作業草案＠~TR/2019/WD-css-lists-3-20190425/$ からの変更点 ◎ Changes since the 25 April 2019 WD
- `§ ~counterによる自動的な付番＠#auto-numbering$ を書き直した — より精確に, CSS2 と一致するよう, 編集上の明確化。 ◎ Rewrote the § 4 Automatic Numbering With Counters section for better precision, editorial clarity, and synchronization with CSS2.
- `2014年 3月 20日 作業草案＠~TR/2014/WD-css-lists-3-20140320/$ からの変更点 ◎ Changes since the 20 March 2014 WD
- ~counter名には `custom-ident$t 【現在は `counter-name$t 】を一貫して利用するようにした。 ◎ Use <custom-ident> consistently for counter names.
- `position$p 用の値 `marker^v を落とした （~markerの位置決めは、 今や，~CSS-2と同じく ほぼ定義されない）。 ◎ Dropped position: marker (marker positioning is now mostly undefined, as in CSS2).
- ~marker用の節を完全に書き直した： それを整備し，現在の期待に揃うようにし，編集上の改善を施した。 ◎ Completely rewrote chapter on markers to tighten it up, align with current expectations, and make editorial improvements.
- `list-item$v ~counter定義を自前の節の中に取り込み，いくつか例を追加し，いくつか明確化した。 ◎ Pulled the list-item counter definition into its own section, added examples, and made some clarifications.
- `marker-side$p の値を［ ~box／~text ］整列における慣行に合致するよう改称した。 ◎ Renamed values of marker-side to match conventions from box/text alignment.
- `counter-set$p は `counter-increment$p より後に適用するものと定義した — より前ではなく。 （ `3810$issue ） ◎ Defined that counter-set is applied after counter-increment rather than before. (Issue 3810)
- `list-style$p 直列化の正準的な順序を — `list-style-type$p が最後になるよう — 確立した。 （ `2624$issue ） ◎ Established the canonical order of list-style serialization to put <'list-style-type'> last. (Issue 2624)
~CSS~level 2 からの変更点
§ 序論にて述べたとおり、 この~moduleには， CSS2.1 に比して有意な変更点がある： ◎ As described in the introduction section, there are significant changes in this module when compared to CSS2.1.
- ~list~markerに直に~styleできるようにするため、 `marker$pe 疑似要素が導入された。 ◎ The ::marker pseudo-element has been introduced to allow styling of the list marker directly.
- `list-style-type$p は、 今や， `string$t および［ `css-counter-styles-3$r により拡張された `counter-style$t 値 ］を受容する。 ◎ list-style-type now accepts a <string> as well as the extended <counter-style> values from [css-counter-styles-3]..
- 定義済み~counter識別子として `list-item^v が導入された。 ◎ The list-item predefined counter identifier has been introduced.
- `counter-set$p ~propが追加された。 ◎ The counter-set property has been added.
- `CSS-DISPLAY-3$r に導入された`行内~level$の`~list~item$を許容した。 ◎ Allowed for inline-level list items, as introduced in [CSS-DISPLAY-3].
~privacyの考慮点
この仕様に対し報告された，新たな~privacyの考慮点は、 無い。 ◎ No new privacy considerations have been reported on this specification.
~securityの考慮点
この仕様に対し報告された，新たな~privacyの考慮点は、 無い。 ◎ No new security considerations have been reported on this specification.