Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Misinformation in the counter-reset example for the list-item counter #33422

Open
glmvc opened this issue May 5, 2024 · 0 comments
Open

Misinformation in the counter-reset example for the list-item counter #33422

glmvc opened this issue May 5, 2024 · 0 comments
Labels
Content:CSS Cascading Style Sheets docs needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.

Comments

@glmvc
Copy link
Contributor

glmvc commented May 5, 2024

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset

What specific section or headline is this issue about?

Overriding the list-item counter

What information was incorrect, unhelpful, or incomplete?

Although the example does not work as described in Chrome (there is already a bug filed in Chromium), the comparison of the CSS counter-reset property with the HTML start attribute is incorrect.
If defined as in the example (counter-reset: list-item 3;), the generated ::marker content starts at "4", not at "3" as with <ol start="3">.

What did you expect to see?

The incorrect comparison/information can be noted/adjusted, or the example can be expanded, similar to the example on the counter-increment reference page, where counter-increment: none; is set on the selected :first-of-type element.
But the use of none for counter-increment seems not to work for list-item in the major browsers. Following rule seems to work:

ol li:first-of-type {
  counter-increment: list-item 0;
}

Do you have any supporting links, references, or citations?

I've created an overview on CodePen where the differences can be inspected and played with.

Do you have anything more you want to share?

From my testing, browsers seem to be very inconsistent with the implicit list-item counter and how it can be modified.
Personally, I have a hard time figuring out how and what exactly is possible with the list-item counter and getting the same results in different browsers. Additionally, there's also the use for content of pseudo-elements with the counter() function, which makes the above points even more confusing.
Maybe someone has more insight on this, but the article definitely lacks some information on this...

MDN metadata

Page report details
@glmvc glmvc added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label May 5, 2024
@github-actions github-actions bot added the Content:CSS Cascading Style Sheets docs label May 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:CSS Cascading Style Sheets docs needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.
Projects
None yet
Development

No branches or pull requests

1 participant