Skip to content

Commit 5bd0809

Browse files
committed
[css-lists-3] Minor editorial cleanup in counters section.
1 parent 174f52f commit 5bd0809

File tree

1 file changed

+42
-44
lines changed

1 file changed

+42
-44
lines changed

css-lists-3/Overview.bs

+42-44
Original file line numberDiff line numberDiff line change
@@ -664,25 +664,32 @@ Automatic Numbering With Counters</h2>
664664
used, among other things, to automatically number list items in CSS.
665665
Every element has a collection of zero or more counters,
666666
which are inherited through the document tree in a way similar to inherited property values.
667-
They are created and manipulated with the 'counter-increment', 'counter-set' and 'counter-reset' properties,
668-
and retrieved with the ''counter()'' and ''counters()'' functions.
669667
Counters have a name and creator element,
670668
which identify the counter,
671669
and an integer value per element.
670+
They are created and manipulated with
671+
the <dfn export>counter properties</dfn> 'counter-increment', 'counter-set' and 'counter-reset',
672+
and used with the ''counter()'' and ''counters()'' [=functional notations=].
672673

673-
Resolving counter values on a given element is a multi-step process:
674+
Resolving [=counter=] values on a given element is a multi-step process:
674675

675-
1. Existing counters are [=inherit counters|inherited=] from previous elements
676-
2. New counters are [=instantiated=] ('counter-reset')
677-
3. Counter values are incremented ('counter-increment')
678-
4. Counter values are explicitly set ('counter-set')
679-
5. Counter values are used (''counter()''/''counters()'')
676+
1. Existing counters are [=inherit counters|inherited=] from previous elements.
677+
2. New counters are [=instantiated=] ('counter-reset').
678+
3. Counter values are incremented ('counter-increment').
679+
4. Counter values are explicitly set ('counter-set').
680+
5. Counter values are used (''counter()''/''counters()'').
681+
682+
UAs may have implementation-specific limits
683+
on the maximum or minimum value of a counter.
684+
If a counter reset, set, or increment
685+
would push the value outside of that range,
686+
the value must be clamped to that range.
680687

681688
ISSUE: This section is not fully synchronized with CSS2.
682689
Please reference <a href="https://www.w3.org/TR/CSS2/generate.html#counters">Automatic Counters and Numbering in CSS Level 2</a>:
683690
any conflicts or omissions here should be resolved in favor of the behavior specified in CSS2.
684691

685-
<h3 id='counter-properties'>
692+
<h3 id='counter-reset'>
686693
Creating Counters: the 'counter-reset' property</h3>
687694

688695
<pre class="propdef">
@@ -699,7 +706,7 @@ Creating Counters: the 'counter-reset' property</h3>
699706
<p class=all-media>User Agents are expected to support this property on all media, including non-visual ones.
700707

701708
The 'counter-reset' property [=instantiates=] new [=counters=] on an element
702-
and sets them to the specified counter values.
709+
and sets them to the specified integer values.
703710
Its values are defined as follows:
704711

705712
<dl dfn-type=value dfn-for=counter-reset>
@@ -712,17 +719,31 @@ Creating Counters: the 'counter-reset' property</h3>
712719
[=Instantiates=] a counter of the given <<custom-ident>> <dfn>counter name</dfn>
713720
with a starting value of the given <<integer>>,
714721
defaulting to ''0''.
722+
</dl>
715723

716-
If multiple instances of the same <<custom-ident>> occur in the property value,
717-
only the last one is honored.
724+
<div class='example' highlight=css>
725+
Note that counter properties follow the [=cascading=] rules as normal.
726+
Thus, due to cascading, the following style sheet:
718727

719-
UAs may have implementation-specific limits
720-
on the maximum or minimum value of a counter.
721-
Starting values outside this range
722-
must be clamped to that range.
723-
</dl>
728+
<pre>
729+
h1 { counter-reset: section -1 }
730+
h1 { counter-reset: imagenum 99 }
731+
</pre>
732+
733+
will only reset ''imagenum''.
734+
To reset both counters,
735+
they have to be specified together:
736+
737+
<pre>H1 { counter-reset: section -1 imagenum 99 }</pre>
738+
739+
The same principles apply to the 'counter-set' and 'counter-increment' properties.
740+
See [[css-cascade-4]].
741+
</div>
742+
743+
If multiple instances of the same <<custom-ident>> occur in the property value,
744+
only the last one is honored.
724745

725-
<h3 id='foo'>
746+
<h3 id='increment-set'>
726747
Manipulating Counter Values: the 'counter-increment' and 'counter-set' properties</h3>
727748

728749
<pre class='propdef'>
@@ -752,8 +773,8 @@ Manipulating Counter Values: the 'counter-increment' and 'counter-set' propertie
752773
<p class=all-media>User Agents are expected to support this property on all media, including non-visual ones.
753774

754775
The 'counter-increment' and 'counter-set' properties
755-
manipulate the value of existing counters.
756-
They only instantiate new counters
776+
manipulate the value of existing [=counters=].
777+
They only [=instantiate=] new counters
757778
if there is no counter of the given name on the element yet.
758779
Their values are defined as follows:
759780

@@ -775,11 +796,6 @@ Manipulating Counter Values: the 'counter-increment' and 'counter-set' propertie
775796
the element [=instantiates=] a new counter of the given name
776797
with a starting value of ''0''
777798
before setting or incrementing its value.
778-
779-
UAs may have implementation-specific limits
780-
on the maximum or minimum value of a counter.
781-
If a set or increment would push the value outside of that range,
782-
the value must be clamped to that range.
783799
</dl>
784800

785801
<div class="example">
@@ -798,29 +814,11 @@ Manipulating Counter Values: the 'counter-increment' and 'counter-set' propertie
798814
</pre>
799815
</div>
800816

801-
<div class='example' highlight=css>
802-
The counter properties follow the cascading rules as normal.
803-
Thus, due to cascading, the following style sheet:
804-
805-
<pre>
806-
h1 { counter-reset: section -1 }
807-
h1 { counter-reset: imagenum 99 }
808-
</pre>
809-
810-
will only reset ''imagenum''.
811-
To reset both counters,
812-
they have to be specified together:
813-
814-
<pre>H1 { counter-reset: section -1 imagenum 99 }</pre>
815-
816-
The same principles apply to the 'counter-set' and 'counter-increment' properties.
817-
</div>
818-
819817
<h3 id="creating-counters">
820818
Creating and Inheriting Counters</h3>
821819

822820
Each element or pseudo-element in a document has
823-
a (possibly empty) set of counters associated to the element,
821+
a (possibly empty) set of [=counters=] associated to the element,
824822
either through inheritance from another element
825823
or through instantiation on the element directly.
826824
These counters are represented as a <dfn>CSS counters set</dfn>,

0 commit comments

Comments
 (0)