4

TL;博士

不要命名你的柜台list-item


问题:

CSS 计数器比较容易理解、有据可查并且有很好的浏览器支持

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

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

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-incrementChrome 和 IE/Edge 时正确计数,尽管它们实际上应该显示 0。

在玩这个时,在不同的浏览器中还有更多奇怪的行为,而且只有当标识符是list-item.

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

list-item 关键字使元素生成一个 ::marker 伪元素,其内容由其列表样式属性(例如项目符号点)指定,以及其自身内容的指定类型的主体框。

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

但由于我找不到任何进一步的文档,我想知道不同的供应商如何实现这样的类似错误......</p>

问题:

我真的很想念这里吗?规范中是否有标识符的保留字?有什么特别之处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
  • 铬 70.0.3538.110 Windows 10 17134.407
  • 边缘 17.17134 Windows 10 17134.407
  • 火狐 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
4

1 回答 1

5

Gabriele Petrioli 猜对了。是在css-lists-3 规范list-item中定义的内置计数器,描述如下:

[...] 列表项会自动增加特殊的“列表项”计数器。除非 'counter-increment' 属性手动为 'list-item' 计数器指定不同的增量,否则它必须在每个列表项上增加 1,同时计数器通常会增加。(这对 'counter-*' 属性的值没有影响。)

这个计数器没有在 CSS2 中定义,因此对 css-lists-3 来说是新的。但它实际上已经很老了——至少有 16 年的历史,反正可以追溯到 CSS3 规范的 FPWD。总的来说,列表和计数器样式在 CSS3 中得到了显着的升级,这意味着“CSS 计数器比较容易理解、有据可查并且具有良好的浏览器支持”这一说法。随着新规范的最终确定和采用,可能会在一段时间内不再适用;)我不确定是实现还是规范首先出现,但大概是添加了实现,因为当时几乎没有人用作list-item计数器( 2002 年,当 IE6 还是全新的时候,CSS2 的采用还远未普及)。

该功能本身尽管已经在规范中出现了十多年,但仍处于不确定状态,并且预计还没有互操作性。无论如何,您的建议是合理的:不要命名您的计数器list-item。实际上,它是计数器的特殊关键字值,由于上述互操作问题,在作者 CSS 中使用时会产生意想不到的结果。

请记住,W3C Wiki 不是“W3C 规范”,即使它由 W3C 维护。这些规范是 w3.org 中的工作草案、候选建议、提议的建议和建议,或 dev.w3.org 中的编辑草案或相应的工作组决定托管其 ED 的任何地方。属性的 wiki 页面通常不包含实际规范中存在的任何技术细节,所以如果你只看那里,你会错过很多这些细节。

于 2018-11-22T03:38:20.317 回答