ویژگی @counter-style در CSS یکی از ابزارهای قدرتمند و کمتر شناخته شده‌ای است که به شما این امکان را می‌دهد تا شمارنده‌ها و لیست‌های سفارشی خود را ایجاد کنید. اگر تا به حال نیاز داشتید شمارنده‌های استاندارد HTML مانند ol را شخصی‌سازی کنید، این ویژگی دقیقاً همان چیزی است که می‌خواهید. دقت کنید: این ویژگی به شما آزادی زیادی می‌دهد که الگوهای لیست دلخواهتان را بسازید و استفاده کنید.
به طور کلی، ساختار این ویژگی به این صورت است که شما می‌توانید یک شمارنده جدید تعریف نموده و سپس در لیست خود از آن استفاده کنید. بسیاری از افراد هنگام طراحی وب سایت‌ها، از شمارنده‌های ساده برای لیست‌ها استفاده می‌کنند، اما @counter-style به شما این امکان را می‌دهد که سبک‌های خاصی که مناسب برند یا موضوع خاص شماست را پیاده‌سازی کنید.
برای مثال، فرض کنید می‌خواهید لیستی ایجاد کنید که به جای عدد، از اشکال هندسی استفاده کند. شما می‌توانید این کار را به سادگی با @counter-style انجام دهید. در اینجا مثالی را مشاهده می‌کنید که این ویژگی را در عمل نشان می‌دهد.
یکی از نکات جذاب دیگر این ویژگی این است که شما می‌توانید نه تنها اعداد بلکه حروف، نمادها، و حتی ترکیب آن‌ها را نیز برای لیست‌های خود استفاده کنید. حالا بیایید به مثال زیر توجه کنیم تا ببینیم چگونه می‌توان یک لاتین شمارنده خاص ایجاد کرد.
@counter-style geometrics {
system: cyclic;
symbols: ■ ▲ ◆ ◉;
suffix: " ";
}
ol {
list-style: geometrics;
}در این قطعه کد:
@counter-style geometrics
یک شمارنده جدید به نام geometrics تعریف کردیم.
system: cyclic;
نوع سیستم شمارنده را cyclic تعیین کردیم، به این معنی که نمادها در یک حلقه تکرار می‌شوند.
symbols: ■ ▲ ◆ ◉;
نمادهایی که می‌خواهیم به عنوان علائم لیست استفاده کنیم، انتخاب کردیم.
suffix: " ";
یک فضای خالی به عنوان پسوند هر نماد تعریف کردیم تا نمایش تمیزتری داشته باشیم.
ol { list-style: geometrics; }
این سبک شمارنده را برای لیست ترتیبی (ol) استفاده کردیم.