Мне кажется, счётчики — фича в CSS, которую иногда незаслуженно забывают. Помню, когда делал мини-фреймворк для оформления по ГОСТ-ам дипломной работы на HTML и CSS, счётчики сильно выручали. Номера глав проставить, пронумеровать изображения и таблицы, ссылки и источники — одно удовольствие.
Для веба тоже несколько раз пригодилось, когда нужно было хитро оформлять нумерованные списки. Приходилось выкручиваться с
::before, отменять браузерные дефолты. А так хотелось иногда применить @counter-style, который первым внедрил Firefox, а потом и Chromium подтянулся. Но Safari...На неделе вышли Release Notes для Safari 17, который приедет с обновлением macOS после 26 сентября. И там написано, что
@counter-style будет работать. Можно даже проверить, какие именно фичи будут работать, по тестам WPT.Это значит, что в скором будущем в CSS можно будет кроссбраузерно делать такое:
@counter-style emoji-numbers {
system: numeric;
symbols: '0️⃣' '1️⃣' '2️⃣' '3️⃣' '4️⃣' '5️⃣' '6️⃣' '7️⃣' '8️⃣' '9️⃣';
suffix: ' ';
}
ol {
list-style: emoji-numbers;
}
И вместо цифр в счётчике будут эмодзи. Или вот так сделать карту настроения (семантически не верно, но для примера сойдёт):
@counter-style rating {
system: cyclic;
symbols: '🙁' '😐' '🙂';
suffix: ' ';
}
ol.rating {
list-style: rating;
}
Можно также задавать свой алфавит для алфавитных счётчиков (например, если захочу использовать беларусский алфавит с моей любимой Ў). И не только. Почитайте документацию, там много интересного.
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style
