css - 计数器标识符为 "list-item"的奇怪浏览器行为

Question

长话短说

不要将您的计数器命名为 list-item

---

问题:

CSS 计数器比较容易理解，嗯documented并且有good browser support .

但是，我遇到了我不理解的意外行为，我想知道为什么会发生这种情况。可能只是浏览器中的错误......

在下面的示例中，我们可以看到计数器按预期工作:

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>

但是当将计数器的标识符更改为 list-item 时，我们可以看到它在不同浏览器中的行为不同:

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>

虽然在 Chrome 和 Firefox 中它仍然按预期工作，但在 Edge 和 Internet Explorer 11 中它从 2 开始计数并递增 2，而在 Safari 中它从 0 开始计数但仍递增 1。

例如注释掉 counter-reset 属性时会变得更加奇怪。然后 Safari 会正确计数，但 Chrome 会从 2 开始计数。当注释掉 counter-increment 时，Chrome 和 IE/Edge 会正确计数，尽管它们实际上应该显示 0。

在玩这个时，不同的浏览器会出现更多奇怪的行为，而且只有当标识符是 list-item 时才会出现这种情况。

当我最初遇到这个问题时，我没有进一步调查的第一个假设是它至少与 display 属性值 list-item 有关。正如 MDN 所述:

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.

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

但是由于我找不到任何关于此的进一步文档，我想知道不同的供应商如何实现类似这样的错误......

问题:

这里有什么我真的想念的吗？规范是否有标识符的保留字？ list-item 有什么特别之处吗？

在 W3C 规范中我找不到任何关于它的信息:

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

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

---

附加信息:

为了完整起见，这里是使用的版本:

• 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

Answer 1

Gabriele Petrioli 猜对了。 list-item 是 css-lists-3 spec 中定义的内置计数器，其描述如下:

[...] 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.)

此计数器未在 CSS2 中定义，因此是 css-lists-3 的新增内容。但它实际上真的很旧 — at least 16 years old , 早在 CSS3 规范的 FPWD 就已经过去了。总的来说，列表和计数器样式在 CSS3 中得到了显着的升级，这意味着“CSS 计数器相对容易理解、文档齐全并且具有良好的浏览器支持”这一说法。随着新规范的最终确定和采用，可能会在一段时间内不再适用 ;) 我不确定是先是实现还是规范，但大概是添加了实现，因为几乎没有人使用 list-item 当时作为计数器(CSS2 在 2002 年还没有普及，当时 IE6 还是全新的)。

尽管在规范中已有十多年，但该功能本身是 still in limbo并且还没有预期的互操作性。无论如何，您的建议是合理的:不要将计数器命名为 list-item。事实上，它是一个特殊的计数器关键字值，由于上述互操作问题，在作者 CSS 中使用时会产生意想不到的结果。

请记住，W3C Wiki 不是“W3C 规范”，尽管它是由 W3C 维护的。规范是工作草案、候选建议、拟议建议和在 w3.org 中作为 TR 找到的建议，或在 dev.w3.org 或相应工作组决定托管其 ED 的任何地方的编辑草案。属性的 wiki 页面通常不包含实际规范中出现的任何技术细节，因此如果只看那里，您会错过很多这些细节。