fix(css): clarify counter-set vs counter-reset

[OnkarRuikar]

• fix Issue with "counter-reset": What is the difference in behavior between the latest Firefox (82 or later) and the older 81 or earlier or other browsers? #13293

The PR:

• Highlights the difference between counter-set and counter-reset properties using an example.
• Corrects the wrong wording for both properties in various places.
• Adds example for reversed() counter.

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters
• /en-US/docs/Web/CSS/counter-reset
• /en-US/docs/Web/CSS/counter-set

(comment last updated: 2024-08-29 13:54:47)

[bsmth]

I'm not sure about this warning. You can reset a counter using:

h1::before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}

See https://drafts.csswg.org/css-lists/#example-838dca3e

So it might be better to say counter-set is good for directly setting values (like skipping increments), and counter reset is for initializing and resetting.

I would keep "After creating a counter using counter-reset, you can adjust its value by using the {{cssxref("counter-set")}} property." but I wouldn't mention the others, especially "counter-set property is used for resetting".

[OnkarRuikar]

I think the spec example has a typo, and it should use counter-set instead.

counter reset is for initializing and resetting.

The spec doesn't say counter-reset updates the existing counter if a counter with the same name exists. So counter-reset can't actually reset the same counter.

[bsmth]

right, it's in https://drafts.csswg.org/css-lists/#increment-set

Manipulating Counter Values: the counter-increment and counter-set properties

dear oh dear 😅

[bsmth]

I'm not sure I follow this explanation, specifically "creating a new counter of the same name". Have you had a look at this one: https://drafts.csswg.org/css-lists/#counter-nesting-example

[OnkarRuikar]

😕 Yes, the spec section does say that, instantiating a new counter on an element, which inherited an identically-named counter from its parent, creates a new counter of the same name, nested inside the existing counter.

[bsmth]

Okay I re-read and I understand now, sorry for picking on that

[bsmth]

Thanks Onkar, I think we can land the changes 👍🏻