Делает “отображение:маркер” работает во всех текущих браузерах, и если да, то как?
-
09-06-2019 - |
Вопрос
Я не могу быть уверен, то ли мой код отстойный, то ли дело просто в том, что браузеры еще не догнали спецификацию.
Моя цель - имитировать маркеры списка, используя сгенерированный контент, чтобы получить, напримерпродолжение работы счетчиков от списка к списку в чистом CSS.
Итак, приведенный ниже код, который я подумай является правильным в соответствии с спецификация, выглядит примерно так:
html {
counter-reset: myCounter;
}
li {
counter-increment: myCounter;
}
li:before {
content: counter(myCounter)". ";
display: marker;
width: 5em;
text-align: right;
marker-offset: 1em;
}
<ol>
<li>The<li>
<li>quick</li>
<li>brown</li>
</ol>
<ol>
<li>fox</li>
<li>jumped</li>
<li>over</li>
</ol>
Но, похоже, это не генерирует маркеры ни в FF3, ни в Chrome, ни в IE8 beta 2, и, если я правильно помню, Opera тоже не работает (хотя с тех пор я удалил Opera).
Итак, кто-нибудь знает, являются ли маркеры предполагаемый работать?Quirksmode.org не проявляет обычной услужливости в этом отношении :(.
Решение
По-видимому, маркер был введен как значение в CSS 2, но не попал в CSS 2.1 из-за отсутствия поддержки браузера.Я полагаю, это не способствовало его популярности …
Источник: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display (Немецкий)
Другие советы
Ой-ой, не знал этого :-|.Тогда это, вероятно, закрывает дело.Потому что в основном я исходил из предположения, что такое базовое свойство CSS2 определенно должно поддерживаться в современных браузерах, но если оно не попало в CSS 2.1, то гораздо логичнее, что это не так.
Для справки в будущем, он не отображается в Центре разработки Mozilla, так что, предположительно, Firefox вообще его не поддерживает.
Также для дальнейшего использования я получил свой оригинальный пример для работы inline-block
вместо этого:
li:before
{
content: counter(myCounter)". ";
display: inline-block;
width: 2em;
padding-right: 0.3em;
text-align: right;
}