计数器标识符为“列表项”的奇怪的浏览器行为

时间:2018-11-21 21:49:52

标签: css css3 css-counter

TL; DR

不要给您的柜台命名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所述:

  

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

请参阅: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

1 个答案:

答案 0 :(得分:4)

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

  

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

此计数器未在CSS2中定义,因此是css-lists-3的新增功能。但是实际上它确实很旧-at least 16 years old,甚至可以追溯到CSS3规范的FPWD。通常,列表和计数器样式在CSS3中得到了重大升级,这意味着“ CSS计数器相对易于理解,文档完善并且具有良好的浏览器支持”。随着新规范的最终确定和采用,可能会在一段时间内不再成立。)我不确定实现或规范是最先出现的,但是大概是因为由于没有人使用list-item作为实现而添加了实现。当时的情况恰恰相反(在2002年IE6还是全新的时候,CSS2的采用还远远没有普及)。

该功能本身(尽管已在规范中使用了十多年)仍为still in limbo,并且预计不会进行互操作。无论如何,您的建议都是正确的:不要为您的柜台命名list-item。实际上,它是计数器的特殊关键字值,由于上述互操作问题,在作者CSS中使用时会产生意外结果。

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