具有计数器标识符“列表项"的奇怪的浏览器行为被称为“列表项". [英] Strange browser behavior with counter identifier "list-item"

问题描述

TL; DR

不要为您的柜台命名列表项

问题:

CSS计数器相对容易理解，很好良好的浏览器支持.

CSS counters are comparatively easy to understand, well documented and have good browser support.

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

However, I encountered unexpected behaviors with them that I do not understand and where I would like to know why this occurs. Probably just bugs in the browsers …

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

In the following example we can see that counters work as expected:

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 时，我们可以看到它在不同的浏览器中的行为有所不同:

But when changing the identifier of the counter to list-item, we can see that it behaves differently in different browsers:

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计数.

While in Chrome and Firefox it still works as expected, in Edge and Internet Explorer 11 it starts counting from 2 and incrementing by 2, and in Safari it starts counting from 0 but still incrementing by 1.

当注释掉 counter-reset 属性时，它变得更加奇怪.Safari然后可以正确计数，但是Chrome从2开始计数.当注释掉 counter-increment (虽然计数器应该实际显示为0)时，Chrome和IE/Edge正确计数.

It gets even more strange when for instance commenting out the counter-reset property. Safari then counts correctly, but Chrome starts counting from 2. And when commenting out just counter-increment Chrome and IE/Edge count correctly though they should actually show 0s.

在使用这种浏览器时，在不同的浏览器中还会有其他奇怪的行为，并且只有当标识符为 list-item 时，所有这些行为才会出现.

There are further strange behaviors in different browsers when playing around with this, and all this only when the identifier is list-item.

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

When I initially encountered the issue, my first assumption without further investigation was that it at least has to do with the display property value list-item. As MDN states:

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

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

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

But as I could not find any further documentation on this, I wonder how different vendors can implement a similar bug like this …

问题:

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

Is there something I really miss here? Are there reserved words for identifiers by the spec? Is there something special about the list-item?

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

In the W3C spec I can not find anything about it:

https://www.w3.org/wiki/CSS/Properties/计数器增加

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

其他信息:

为完整起见，以下是使用的版本:

For the sake of completeness here are the used versions:

• 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

推荐答案

Gabriele Petrioli猜对了. list-item 是 css-lists-3规范，其说明如下:

Gabriele Petrioli guessed right. list-item is a built-in counter defined in the css-lists-3 spec, which describes it as follows:

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

[...] 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的新增功能.但这确实很老-至少16岁，甚至可以追溯到CSS3规范的FPWD.总的来说，列表和计数器样式在CSS3中得到了重大升级，这意味着"CSS计数器相对易于理解，文档完善并且具有良好的浏览器支持".随着新规范的最终确定和采用，可能会在一段时间内不再成立；)我不确定实现或规范是最先出现的，但大概是因为由于几乎没有人使用 list-item 作为当时的计数器(在2002年IE6仍然是全新的时候，CSS2的采用几乎没有普及).

This counter is not defined in CSS2 and is therefore new to css-lists-3. But it's actually really old — at least 16 years old, as far back as the FPWD of the CSS3 spec goes anyway. In general, list and counter styles are getting significant upgrades in CSS3, which means that the statement "CSS counters are comparatively easy to understand, well documented and have good browser support." might cease to be true for a while as the new spec is finalized and adopted ;) I'm not sure if the implementations or the spec came first, but presumably the implementation was added because almost no one used list-item as a counter at the time (CSS2 adoption was nowhere near widespread in 2002 when IE6 was still brand new).

尽管已在规范中使用了十多年，但该功能本身为

The feature itself, despite having been in the spec for over a decade, is still in limbo and interop is not expected yet. In any case, your advice is sound: don't name your counters list-item. It is, indeed, a special keyword value for counters which due to the aforementioned interop issues will have unexpected results when used in author CSS.

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

Keep in mind that the W3C Wiki is not "the W3C spec", even though it is maintained by the W3C. The specs are the Working Drafts, Candidate Recommendations, Proposed Recommendations and Recommendations found as TRs in w3.org, or Editor's Drafts in dev.w3.org or wherever the respective WG decides to host their EDs. The wiki pages for the properties often don't contain any of the technical details present in the actual specs, so you're going to miss a lot of those details if you only look there.

这篇关于具有计数器标识符“列表项"的奇怪的浏览器行为被称为“列表项".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！