[css-lists] `<reversed-counter-name> <integer>` seems useless
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 24
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
7in the example) - In the implicit
list-itemcounter (it'scin 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-resetinstantiates alist-itemcounter 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-itembut to all counters. That is,list-itemcounters would getcounter-increment: list-item 1by 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read the CSS Lists draft sections on counter-reset and counter instantiation first, then compare the two alternatives described in this issue. Done means reaching and recording a standards decision, with the affected reversed-counter syntax and semantics updated consistently.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100