اگر شما به دنبال یک روش جالب و خلاقانه برای نمایش لیست‌های مرتب شده‌تان در وبسایت خود هستید، استفاده از دستور @counter-style در CSS یک گزینه عالی است. این دستور به شما کمک می‌کند تا ظاهر و حس نمایش شمارنده را به سلیقه خودتان شخصی‌سازی کنید. حالا چرا این موضوع عالی است؟ خب، شما می‌توانید به راحتی از صفر شروع کنید و استایل شمارنده خودتان را طراحی کنید - چیزی که استانداردهای خود را داشته باشد و توسط دیگران برای ایجاد لیست‌های تجاری یا شخصی منحصر به‌فرد مورد استفاده قرار گیرد.
برای مثال اگر شما دوست دارید که لیست‌هایتان به جای اعداد، با حروف یا نمادهای خاص نمایش داده شوند، @counter-style دقیقاً ابزاری است که به آن نیاز دارید. کاربردهای واقعی این ویژگی مختلف‌اند و شما می‌توانید به راحتی آن را با دیگر ویژگی‌های CSS ترکیب کرده تا طراحی صفحه‌تان واکنش‌گرا و کاربرپسند باشد.
از دیگر قابلیت‌های جذاب این ویژگی امکان تعیین پیشوند و پسوند برای شمارنده‌هاست که به شما اجازه می‌دهد تا تجربه کاربری پیچیده‌تری بسازید. فرض کنید که شما می‌خواهید پیشوند "فصل" و پسوند "صفحه" را به طور خودکار در کنار اعداد فصل و صفحه خود اضافه کنید. این ویژگی کار را برای شما بسیار ساده خواهد کرد.
با وجود سادگی در تعریف و استفاده، قدرت این قابلیت بسیار فراگیر است و می‌تواند در پروژه‌های مختلفی از طراحی سایت‌های خبری تا وبلاگ‌های فرهنگی-ادبی که نیاز به شخصی‌سازی بیشتری دارند، اجرا شود. کافی است یک بار با این ویژگی کار کنید تا دریابید چگونه می‌توانید ایده‌های خلاقانه خود را به سرعت پیاده کنید.
نمونه کد استفاده از @counter-style
@counter-style example-style {
system: numeric;
symbols: '👍' '👎';
prefix: "(";
suffix: ")";
}
ul {
list-style: example-style;
}
توضیح خط به خط کد
@counter-style example-style
این خط یک استایل شمارنده جدید به نام example-style ایجاد می‌کند.
system: numeric;
این خط نشان می‌دهد که شمارش به صورت عددی باشد.
symbols: '👍' '👎';
این خط سمبل‌هایی که برای نمایش اعداد استفاده می‌شوند را تعیین می‌کند.
prefix: "(";
این خط پیشوندی که قبل از هر شماره نمایش داده می‌شود را مشخص می‌کند.
suffix: ")";
این خط پسوندی که بعد از هر شماره نمایش داده می‌شود را تعیین می‌کند.
ul { list-style: example-style; }
این خط نشان می‌دهد که تمامی لیست‌های مرتب شده از این استایل شمارنده استفاده کنند.