Strange browser behavior with counter identifier "list-item"

TL;DR

Don’t name your counter list-item

Issue:

CSS counters are comparatively easy to understand, well documented and have good browser support.

However, I encountered unexpected behaviors with them that I do not understand and where I would like to know why this occurs. Probably just bugs in the browsers …

In the following example we can see that counters work as expected:

ol {
  list-style-type: none;
  counter-reset: list-counter;
}

ol>li {
  counter-increment: list-counter;
}

ol>li:before {
  content: counter(list-counter) '. ';
}

<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
</ol>

But when changing the identifier of the counter to list-item, we can see that it behaves differently in different browsers:

ol {
  list-style-type: none;
  counter-reset: list-item;
}

ol>li {
  counter-increment: list-item;
}

ol>li:before {
  content: counter(list-item) '. ';
}

<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
</ol>

While in Chrome and Firefox it still works as expected, in Edge and Internet Explorer 11 it starts counting from 2 and incrementing by 2, and in Safari it starts counting from 0 but still incrementing by 1.

It gets even more strange when for instance commenting out the counter-reset property. Safari then counts correctly, but Chrome starts counting from 2. And when commenting out just counter-increment Chrome and IE/Edge count correctly though they should actually show 0s.

There are further strange behaviors in different browsers when playing around with this, and all this only when the identifier is list-item.

When I initially encountered the issue, my first assumption without further investigation was that it at least has to do with the display property value list-item. As MDN states:

The list-item keyword causes the element to generate a ::marker pseudo-element with the content specified by its list-style properties (for example a bullet point) together with a principal box of the specified type for its own contents.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem

But as I could not find any further documentation on this, I wonder how different vendors can implement a similar bug like this …

Question:

Is there something I really miss here? Are there reserved words for identifiers by the spec? Is there something special about the list-item?

In the W3C spec I can not find anything about it:

https://www.w3.org/wiki/CSS/Properties/counter-increment

https://www.w3.org/wiki/CSS/Properties/counter-reset

Additional information:

For the sake of completeness here are the used versions:

Chrome 70.0.3538.110 MacOS Mojave 10.14.1
Chrome 70.0.3538.110 Windows 10 17134.407
Edge 17.17134 Windows 10 17134.407
Firefox 63.0.3 MacOS Mojave 10.14.1
Firefox 63.0.3 Windows 10 17134.407
Internet Explorer 11.407.17134.0 Windows 10 17134.407
Safari 12.0.1 MacOS Mojave 10.14.1

Gabriele Petrioli guessed right. list-item is a built-in counter defined in the css-lists-3 spec, which describes it as follows:

[...] list items automatically increment the special ‘list-item’ counter. Unless the ‘counter-increment’ property manually specifies a different increment for the ‘list-item’ counter, it must be incremented by 1 on every list item, at the same time that counters are normally incremented. (This has no effect on the values of the ‘counter-*’ properties.)

This counter is not defined in CSS2 and is therefore new to css-lists-3. But it's actually really old — at least 16 years old, as far back as the FPWD of the CSS3 spec goes anyway. In general, list and counter styles are getting significant upgrades in CSS3, which means that the statement "CSS counters are comparatively easy to understand, well documented and have good browser support." might cease to be true for a while as the new spec is finalized and adopted ;) I'm not sure if the implementations or the spec came first, but presumably the implementation was added because almost no one used list-item as a counter at the time (CSS2 adoption was nowhere near widespread in 2002 when IE6 was still brand new).

The feature itself, despite having been in the spec for over a decade, is still in limbo and interop is not expected yet. In any case, your advice is sound: don't name your counters list-item. It is, indeed, a special keyword value for counters which due to the aforementioned interop issues will have unexpected results when used in author CSS.

Keep in mind that the W3C Wiki is not "the W3C spec", even though it is maintained by the W3C. The specs are the Working Drafts, Candidate Recommendations, Proposed Recommendations and Recommendations found as TRs in w3.org, or Editor's Drafts in dev.w3.org or wherever the respective WG decides to host their EDs. The wiki pages for the properties often don't contain any of the technical details present in the actual specs, so you're going to miss a lot of those details if you only look there.

Recommended topics

Hot tags