@@ -664,25 +664,32 @@ Automatic Numbering With Counters</h2>
664
664
used, among other things, to automatically number list items in CSS.
665
665
Every element has a collection of zero or more counters,
666
666
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.
669
667
Counters have a name and creator element,
670
668
which identify the counter,
671
669
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=] .
672
673
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:
674
675
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.
680
687
681
688
ISSUE: This section is not fully synchronized with CSS2.
682
689
Please reference <a href="https://www.w3.org/TR/CSS2/generate.html#counters">Automatic Counters and Numbering in CSS Level 2</a> :
683
690
any conflicts or omissions here should be resolved in favor of the behavior specified in CSS2.
684
691
685
- <h3 id='counter-properties '>
692
+ <h3 id='counter-reset '>
686
693
Creating Counters: the 'counter-reset' property</h3>
687
694
688
695
<pre class="propdef">
@@ -699,7 +706,7 @@ Creating Counters: the 'counter-reset' property</h3>
699
706
<p class=all-media> User Agents are expected to support this property on all media, including non-visual ones.
700
707
701
708
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.
703
710
Its values are defined as follows:
704
711
705
712
<dl dfn-type=value dfn-for=counter-reset>
@@ -712,17 +719,31 @@ Creating Counters: the 'counter-reset' property</h3>
712
719
[=Instantiates=] a counter of the given <<custom-ident>> <dfn>counter name</dfn>
713
720
with a starting value of the given <<integer>> ,
714
721
defaulting to ''0'' .
722
+ </dl>
715
723
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:
718
727
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.
724
745
725
- <h3 id='foo '>
746
+ <h3 id='increment-set '>
726
747
Manipulating Counter Values: the 'counter-increment' and 'counter-set' properties</h3>
727
748
728
749
<pre class='propdef'>
@@ -752,8 +773,8 @@ Manipulating Counter Values: the 'counter-increment' and 'counter-set' propertie
752
773
<p class=all-media> User Agents are expected to support this property on all media, including non-visual ones.
753
774
754
775
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
757
778
if there is no counter of the given name on the element yet.
758
779
Their values are defined as follows:
759
780
@@ -775,11 +796,6 @@ Manipulating Counter Values: the 'counter-increment' and 'counter-set' propertie
775
796
the element [=instantiates=] a new counter of the given name
776
797
with a starting value of ''0''
777
798
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.
783
799
</dl>
784
800
785
801
<div class="example">
@@ -798,29 +814,11 @@ Manipulating Counter Values: the 'counter-increment' and 'counter-set' propertie
798
814
</pre>
799
815
</div>
800
816
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
-
819
817
<h3 id="creating-counters">
820
818
Creating and Inheriting Counters</h3>
821
819
822
820
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,
824
822
either through inheritance from another element
825
823
or through instantiation on the element directly.
826
824
These counters are represented as a <dfn>CSS counters set</dfn> ,
0 commit comments