mefody.dev

Стили счётчиков



Мне кажется, счётчики — фича в 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