[CSS] Implement CSS Lists counter-reset: reversed

[Rumyra]

Acceptance Criteria

• The listed features are documented sufficiently on MDN
• BCD is updated
• Interactive example and data repos are updated if appropriate
• mdn/data updated
• The content has been reviewed as needed

For folks helping with Firefox related documentation

• Set bugs to dev-doc-complete
• Add entry to Firefox release notes if feature is enabled in release
  or
• Add entry to Firefox experimental features page if feature is not yet enabled in release

Features to document

Implement CSS Lists conter-reset: reversed(list-item) and

/
default style per spec

Related Gecko bugs

https://bugzilla.mozilla.org/show_bug.cgi?id=1706346

[hamishwillee]

I think I understand this, but I'm seeing some inconsistent behaviour. Discussion kicked off in https://bugzilla.mozilla.org/show_bug.cgi?id=1706346

In summary, counter-reset allows you to specify a counter name and initial value like this:

counter-reset:  <counter-identifier> 7 //counter with initial value 7
counter-reset:  <counter-identifier> //counter with initial value zero

or you can specify none instead of an integer value to reset the counter).

counter-reset:  mycounter none

What has changed with this PR is that you can specify reversed(<counter-identifier>) s your counter identifier, and the new counter that is created/reset has the reversed flag set.

counter-reset:  reversed(mycounter) 7 //Reversed counter with initial value of 7
counter-reset:  reversed(mycounter) //Reversed counter with initial value of "the number of elements"

This feature has then been used to implement the "special" counter used for lists - list-item. So now <ol reversed> depends on this behaviour.

So lists behave as you would expect. You can reverse them in HTML using the reversed attribute, or in CSS using counter-reset: reversed(list-item).

There is a small "confusion" with reversed items in that if you use list-item then the counter automatically decrements and increments for counters. However if you have your own counter you must specify the counter as incrementing or decrementing manually using counter-increment. In other words there isn't any real difference between a reversed or non-reversed counter other than the default value set - you can have a forward counter and make it reverse with counter-increment

[hamishwillee]

@Rumyra Would appreciate your advice on interactive examples.

This has an example counter reset here: https://github.com/mdn/interactive-examples/tree/main/live-examples/css-examples/lists

counter-reset.html allows you to select CSS for counter-reset to apply to an element in a list. This then applies to all the peers at the same level for numbering. The actual numberin gis then done in counter-reset.css using the counter-increment on H2.

Two problems. I can't work out how we might conditionally change the counter-increment based on the selection in the html. That means I can't change it to reverse. Or rather I can, but only if I change this to an ordered list, which is kind of only "half the story". Second problem is that only Firefox supports this, so you'll get annoying behaviour on other things.

I was thinking of fixing this by leaving the interactive example alone and just adding a simple embedded live example. Seem reasonable?

[Rumyra]

I was thinking of fixing this by leaving the interactive example alone and just adding a simple embedded live example. Seem reasonable?

Having checked the page I think this is a very good way to go. The interactive example is just going to be finiky otherwise 👍

[hamishwillee]

Status

• Docs
  • counter-reset
    • First part - explain the usage. CSS counter-reset reversed counters #11362
  • using CSS counters - Using CSS counters - add reversing examples #11529
• BCD update - Firefox 96 supports CSS counter-reset: reversed() browser-compat-data#14093
• Release notes - FF96 relnote: CSS counter-reset: reversed() #11359
• dev-doc-complete

OK, I think the bulk of the work needed for this is done. Obviously we could continue forever with examples and some would be welcome. However I suspect others might do a better job than me at that.