2

Usually when CSS counters are used on lists, the OL list-style-type is set to none and and ::before pseudo-elements are used instead of true list markers.

However, I noticed that in Firefox (69.0, target:x86_64-apple-darwin, running on MacOS Mojave) the presence of a counter-reset does something odd to actual list markers. Consider:

ol {counter-reset: some-counter;}
li::before {
  content: "Marker should be: " counter(some-counter) ".";
  counter-increment: some-counter;
}

ol.alpha {list-style-type:lower-alpha;}
ol.alpha > li::before{content: "Marker should be: " counter(some-counter, lower-alpha) ".";}
<h2>List A</h2>
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>

<h2>List B</h2>
<ol>
  <li>
    <ol class="alpha">
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol class="alpha">
      <li style="counter-reset: some-counter"></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>

Chrome and Safari render as expected, but in FF, List A gets rendered as:

FF result 1

and List B gets rendered as:

enter image description here

In other words, when going through a two-level list, FF is keeping track of:

  1. A shared list marker counter that is incremented both when it hits both the first-tier LIs and any LIs nested inside.
  2. A counter instance of "some-counter" that applies only to the outer list
  3. Counter instances of "some-counter" that apply only to any inner lists

FF's list markers display that shared counter (with any necessary translation, e.g to lower-alpha in List B above), while ::before pseudo-elements display the "some-counter" instances appropriate to their level.

If you comment out the counter-reset, FF goes back to expected behavior in its markers. (Even setting "counter-reset:none" still causes the strange behavior.)

Is this a bug, or is there some reason that there would be undefined behavior in list markers when a counter-reset (even counter-reset:none;) is applied to a top-level <ol>?

Nickolay
  • 31,095
  • 13
  • 107
  • 185
Jacob C.
  • 345
  • 1
  • 16
  • I do not see your issue on multiple versions of Firefox when running this snippet. Could there be other CSS that is not here that's causing the issue? – Austen Holland Sep 03 '19 at 23:59
  • 2
    I do see the behaviour in Firefox 68 and 71, but not in SeaMonkey 2.57 (=FF 60), so something must have changed recently! – Mr Lister Sep 04 '19 at 06:39
  • @AustenHolland The snippet here shows it for me (see https://i.stack.imgur.com/oRmrQ.png ), just as it did in a jsfiddle, and before that in a real site example that a puzzled colleague complained to me about when she encountered it on her computer. I've updated with slightly more specific version info (this is the 64-bit version, running on MacOS Mojave, though I don't know if that's relevant). – Jacob C. Sep 04 '19 at 19:29
  • @MrLister Hmm. I'm leaning toward this being a bug. I certainly haven't found anything at https://drafts.csswg.org/css-lists-3/#counter-reset that would seem to suggest that counter-reset should disrupt https://html.spec.whatwg.org/multipage/grouping-content.html#ordinal-value – Jacob C. Sep 04 '19 at 19:40

1 Answers1

1

This is intentional, pending a spec clarification. (This behavior was implemented for Firefox 68.)

Firefox lets your ol {counter-reset: some-counter} rule override the built-in UA style ol {counter-reset: list-item}, removing any special meaning of the ol wrt list numbering. As noted in the bug, you can specify both counters (ol {counter-reset: some-counter list-item;}) to fix this.

ol {counter-reset: some-counter list-item;}
li::before {
  content: "Marker should be: " counter(some-counter) ".";
  counter-increment: some-counter;
}

ol.alpha {list-style-type:lower-alpha;}
ol.alpha > li::before{content: "Marker should be: " counter(some-counter, lower-alpha) ".";}
<h2>List A</h2>
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>

<h2>List B</h2>
<ol>
  <li>
    <ol class="alpha">
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol class="alpha">
      <li style="counter-reset: some-counter"></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>
Nickolay
  • 31,095
  • 13
  • 107
  • 185
  • 1
    Something that I now see is related, that people may wish to bear in mind regarding interoperability: https://stackoverflow.com/questions/53420948/strange-browser-behavior-with-counter-identifier-list-item – Jacob C. Sep 16 '19 at 20:03