آشنایی با @counter-style در CSS

@counter-style یکی از خصوصیات جذاب و کمتر شناخته شده در CSS است که به ما این امکان را می دهد تا سبک های شمارشی سفارشی برای لیست ها و عناصر دیگر تعریف کنیم. این ویژگی به ما انعطاف زیادی می دهد تا سبک های شمارشی متفاوتی برای پروژه های وب تعریف کنیم و به عناصر خود جلوه های خاصی بدهیم.

فرض کنیم شما دارید روی پروژه‌ای کار می‌کنید که در آن نیاز به سبک های شمارشی دارید که در پیش‌تعیینات مرورگرها وجود ندارد. با کمک @counter-style می‌توانید به راحتی سبک‌هایی جدید و سفارشی ایجاد کنید و از آن‌ها در پروژه‌های خود استفاده کنید. البته نکته قابل توجه این است که این ویژگی در همه مرورگرها پشتیبانی نمی‌شود و استفاده از آن نیاز به آشنایی با سازگاری مرورگرها دارد.

تعریف یک فرمت شمارشی جدید می‌تواند به شما کمک کند که لیست‌هایی داشته باشید که به زیبایی و مطابق با بودجه طراحی‌تان به نظر برسند. ممکن است بخواهید از اعداد رومی، حروف خاص الفبای فارسی یا حتی یک مجموعه ایموجی استفاده کنید!

به عبارت دیگر، با استفاده از @counter-style، امکانات بی‌پایانی برای خلاقیت در طراحی و توسعه سایت‌های خاص به شما داده می‌شود. اما پیش از آن، بهتر است با یک مثال عملی نحوه‌ی تنظیم یک سبک شمارشی جدید را مرور کنیم.

@counter-style emojiStyle {
  system: cyclic;
  symbols: "😀" "😂" "😅" "😁";
  suffix: " ";
}

ul.custom-list {
  list-style: emojiStyle;
}

@counter-style emojiStyle: در اینجا، یک سبک شمارشی جدید به نام emojiStyle تعریف می‌کنیم.

system: cyclic;: مشخص می‌کند که سبک شمارشی ما به شکل چرخشی تکرار شود.

symbols: "😀" "😂" "😅" "😁";: این خط نشان می‌دهد که از چه نمادی برای هر آیتم استفاده شود. ما اینجا از چند ایموجی استفاده کردیم، اما می‌شود هر نمادی که دوست داشته باشید بگذارید.

suffix: " ";: مشخص می‌کند که بعد از هر نماد چه چیزی اضافه شود. در این مثال یک اسپیس اضافه کردیم.

ul.custom-list: کلاس CSS برای لیست سفارشی که می‌خواهیم سبک شمارشی جدید را به آن اعمال کنیم.

list-style: emojiStyle;: اینجا می‌گوییم که برای این لیست از سبک شمارشی emojiStyle استفاده کند.