@counter-style — создание собственных стилей счётчиков в CSS

@counter-style — это правило CSS, которое позволяет определять свои собственные стили нумерации для списков, счётчиков и других элементов, использующих функцию counter(). Вместо привычных арабских цифр, латинских букв или стандартных маркеров вы можете задать любые символы, изображения или даже сложные последовательности.

Поддержка: доступно в Baseline в статусе «Newly Available» с 18 сентября 2023 года.

Зачем это нужно

• Красивые нумерованные списки в дизайне сайтов и приложений.
• Необычные маркеры для оглавлений, шагов, этапов.
• Локализация нумерации под редкие системы письма.
• Игровые или тематические интерфейсы (смайлики, иконки, символы).

Синтаксис

@counter-style имя-стиля {
  system: <система>;
  symbols: <символы>;
  /* дополнительные дескрипторы */
}

Основные дескрипторы

• system — алгоритм формирования счётчика. Самые полезные:
  • cyclic — перебирает символы по кругу.
  • fixed — использует символы один раз, потом останавливается.
  • numeric, alphabetic, symbolic — классические системы.
• symbols — список символов или строк.
• prefix, suffix — добавляют текст до и после маркера (по умолчанию suffix: ". ").
• range — диапазон, в котором действует стиль.

Простые примеры

Круглые чёрно-белые маркеры

@counter-style circled {
  system: fixed;
  symbols: ⚪ ⚫ ⚪ ⚫ ⚪ ⚫ ⚪ ⚫;
  suffix: " ";
}

ol {
  list-style: circled;
}

Результат: первые 8 пунктов будут чередовать белый и чёрный кружки, дальше — обычные цифры.

Римские цифры из символов

@counter-style roman-like {
  system: additive;
  additive-symbols: 10 X, 9 IX, 5 V, 4 IV, 1 I;
  suffix: ". ";
}

ol.roman {
  list-style: roman-like;
}

Применение к произвольным элементам

Счётчики работают не только со списками. Можно нумеровать заголовки:

@counter-style boxes {
  system: numeric;
  symbols: "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "[";
  suffix: "] ";
}

section {
  counter-increment: box;
}

section::before {
  content: counter(box, boxes);
  color: #e91e63;
}

Готовые системные стили

Браузеры уже имеют множество встроенных стилей, которые можно переопределить:

• decimal, decimal-leading-zero
• lower-roman, upper-roman
• lower-greek, georgian, armenian и др.

Полезные ссылки

• MDN: @counter-style
• Can I use: css-counter-styles

Теперь вы можете создавать уникальные стили нумерации под любой проект!

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.