TL; DR
Не называйте свой счетчик list-item
Выпуск:
Счетчики CSS сравнительно просты для понимания, хорошо задокументированы и имеют хорошую поддержку браузера .
Однако я столкнулся с неожиданным поведением, которое я не понимаю и где яхотел бы знать, почему это происходит.Вероятно, просто ошибки в браузерах ...
В следующем примере мы видим, что счетчики работают должным образом:
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.
Когда я впервые столкнулся с проблемой, мое первое предположение без дальнейшего изучения было то, что это по крайней мере связано со значением свойства displaylist-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 1017134,407
- Internet Explorer 11.407.17134.0 Windows 10 17134.407
- Safari 12.0.1 MacOS Mojave 10.14.1