مقدمه‌ای بر @counter-style در CSS
الگوی @counter-style در CSS برای تعریف الگوهای شمارشی سفارشی استفاده می‌شود. این ویژگی به شما امکان می‌دهد تا به جای استفاده از اعداد یا لیست‌های نقطه‌گذاری پیش‌فرض مرورگر، الگوهای خاص خود را برای نمایش لیست‌ها تعریف کنید. این ویژگی در طراحی رابط‌های کاربری با استایل خاص بسیار مفید است.
یکی از قابلیت‌های جذاب این ویژگی، امکان تعریف یک جایگزین یا fallback است. در صورتی که مرورگر کاربر قادر به نمایش الگوی تعریف شده نباشد، از الگوی جایگزین استفاده خواهد شد. این امر تضمین می‌کند که لیست‌های شما همواره ظاهر مناسبی دارند.
استفاده از @counter-style و تعریف fallback
برای استفاده از @counter-style، ابتدا باید الگوی خود را تعریف کنید و سپس آن را در قوانین CSS مربوط به لیست خود به کار ببرید. حال، با یک مثال ساده آشنا می‌شویم.
<style>
@counter-style custom-counter {
system: numeric;
symbols: "گ" "چ" "پ" "ژ";
fallback: disc;
}
ol {
list-style: custom-counter;
}
</style>
<ol>
<li>اولین مورد</li>
<li>دومین مورد</li>
<li>سومین مورد</li>
</ol>
توضیح قدم به قدم کد
<style>این تگ شروع بخش استایل CSS است که در آن الگوی شمارشی خود را تعریف خواهیم کرد.
@counter-style custom-counterاین دستور برای تعریف یک سبک شمارشی جدید با نام
custom-counter استفاده می‌شود.system: numericاین ویژگی تعیین می‌کند که سبک شمارشی طبق سیستم عددی کار کند.
symbols: "گ" "چ" "پ" "ژ";این خط نمادهایی را که برای شمارش آیتم‌های لیست استفاده می‌شوند، تعریف می‌کند.
fallback: disc;این ویژگی مشخص می‌کند که اگر مرورگر قادر به نمایش الگوی شمارش سفارشی نباشد، از نماد
disc برای آیتم‌های لیست استفاده کند.olاین خط به مرورگر می‌گوید که برای عناصر لیست ترتیبی (ordered list) از سبک شمارشی که قبلا تعریف کردیم، استفاده کند.
<li>این عنصر درون لیست، نماینده یک آیتم از لیست ما است.