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

Question

TL;DR

不要给你的计数器命名 list-item

问题：

CSS计数器比较好理解，嗯documented and have 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 计数正确，尽管它们实际上应该显示 0s。

在玩这个的时候，不同的浏览器会有更多奇怪的行为，只有当标识符是 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
边 17.17134 Windows 10 17134.407
Firefox 63.0.3 MacOS Mojave 10.14.1
火狐 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 counters are comparatively easy to understand, well documented and have good browser support." 可能会在一段时间内不再适用 ;) 我不是确定实现或规范是否先出现，但大概是添加了实现，因为当时几乎没有人使用 list-item 作为计数器（CSS2 在 2002 年 IE6 仍然是品牌时，采用远未广泛新）。

尽管已在规范中存在十多年，但该功能本身是 still in limbo 并且还没有互操作性。无论如何，您的建议是合理的：不要将您的计数器命名为 list-item。它确实是一个特殊的计数器关键字值，由于上述互操作问题，在作者 CSS.

中使用时会产生意想不到的结果

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

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

Strange browser behavior with counter identifier "list-item"

css

css-counter