Description
#6096 added the reversed()
syntax to the counter-reset
property.
However, unless I'm missing something, these are totally equivalent:
counter-reset: c 7;
counter-reset: reversed(c) 7;
The only difference is that the latter instantiates the counter with a reversed flag, but this flag only seems relevant in these cases:
- When omitting the starting value (it's
7
in the example) - In the implicit
list-item
counter (it'sc
in the example)
So IMO we have two reasonable possibilities:
-
Drop the useless
<reversed-counter-name> <integer>
syntax, and just keep<reversed-counter-name>
.The reversed flag of the counter would then be set by
<reversed-counter-name>
and also whencounter-reset
instantiates alist-item
counter in an<ol reversed>
. The preshint for reversed HTML lists would be:ol[reversed] { counter-reset: reversed(list-item); } ol[reversed][start] { counter-reset: list-item calc(attr(start integer) + 1); /* with reversed flag */ }
-
Keep
<reversed-counter-name> <integer>
, but then negate increments not just tolist-item
but to all counters. That is,list-item
counters would getcounter-increment: list-item 1
by default, not -1 for reversed lists. And when incrementing a reversed counter, the specified amount would actually be decremented. So<style> #parent { counter-reset: reversed(c) 7; } #parent > .child { counter-increment: c 2 } /* Decrements since the counter is reversed */ #parent > .child::before { content: counter(c) ". " } </style> <div id="parent"> <div class="child">foo</div> <div class="child">bar</div> </div>
would look like
5. foo 3. bar
The latter seems more useful for authors, and makes list-item
less magic.