В начале недели я рассказал о нумерованных списках и предложил использовать их при реализации блоков с цифрами. Прошлый пост о том, как стилизовать счётчики. Завершаю неделю счётчиков рассказом о ещё двух возможностях: функции
counters() и директиве @counter-style.Помимо функции
counter(), которая используется для вывода счётчиков, есть ещё одна похожая функция — counters(). Её задача — выводить вложенные счётчики, что применимо к многоуровневым спискам или к нумерованным заголовкам разделов и подразделов:ol {
counter-reset: section;
}
li {
counter-increment: section;
}
li::marker {
content: counters(section, '.') ' ';
}
/*
1 Foo
1.1 Bar
1.2 Baz
1.2.1 Foo
2 Bar
2.1 Baz
*/Первым аргументом
counters() принимает название счётчика, затем разделитель и опционально можно указать тип счётчика в качестве третьего аргумента.Директива
@counter-style позволяет определять собственные типы счётчиков по аналогии с тем, как @font-face определяет семейство шрифта или @property определяет пользовательское свойство.В
@counter-style предлагает следующие опции:-
system — система нумерации. Значения: cyclic, numeric, alphabetic, symbolic, additive и fixed. Можно наследоваться от существующих типов счётчиков;-
symbols — список символов, используемых для генерации маркеров;-
additive-symbols — список дополнительных символов, используемых при системе нумерации additive;-
negative — символ, который добавляется для отрицательных значений счётчика;-
prefix — префикс, добавляемый перед значением счётчика;-
suffix — суффикс, добавляемый после значения счётчика;-
range — диапазон значений счётчика, к которому применяются правила пользовательского счётчика;-
pad — символ, который добавляется перед значением счётчика для достижения одинакового количества символов всех значений счётчика;-
speak-as — определяет как озвучивать маркеры списка;-
fallback — тип счётчика, к которому нужно вернуться, если не удаётся сгенерировать значение в текущем типе.С помощью этих свойств можно определять счётчики для разных языков, письменностей и систем исчислений. На странице Ready-made Counter Styles от авторов спецификации собраны примеры реализации пользовательских счётчиков.
А вот пример счётчика от меня с использованием эмодзи-цифр:
@counter-style emoji-numbers {
system: numeric;
symbols: '0️⃣' '1️⃣' '2️⃣' '3️⃣' '4️⃣' '5️⃣' '6️⃣' '7️⃣' '8️⃣' '9️⃣';
suffix: ' ';
negative: '➖';
pad: 2 '0️⃣';
}
ol {
list-style: emoji-numbers;
}
/*
<ol start="-1">
...
</ol>
➖1️⃣ Foo
0️⃣0️⃣ Bar
0️⃣1️⃣ Baz
...
0️⃣9️⃣ Foo
1️⃣0️⃣ Bar
...
*/Важный дисклеймер: маркеры списка зачитываются программами чтения с экрана. Поэтому взвесьте «за» и «против» в вашем конкретном случае. Если вы считаете маркеры избыточными, стоит вернуться к генерации цифр в шаблонах и скрыть их от программ чтения с экрана.
#css