قوانین @counter-style CSS

تعریف و استفاده

CSS @counter-style این قوانین برای تعریف سبک شمارنده‌ی شخصی استفاده می‌شود.

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

مثال

سبک شمارنده‌ی شخصی برای لیست تعیین کنید:

@counter-style crown {
  system: cyclic;
  symbols: "\1F451";
  suffix: " ";
}
ul {
  list-style: crown;
}

آزمایش شخصی کنید

عبارت CSS

@counter-style countername {
  one or more descriptors
}

مقدار属性

مقدار توضیح
countername

تعریف نام سبک شمارنده به صورت حساس به حروف بزرگ و کوچک.

توجه: نام شمارنده نمی‌تواند یکی از موارد زیر باشد: none، decimal، disc، square، circle، disclosure-open یا disclosure-closed.

system

تعریف الگوریتمی که مقدار عددی شمارنده را به رشته تبدیل می‌کند.

اگر system به صورت cyclic، numeric، alphabetic، symbolic یا fixed تنظیم شده باشد، شناسه symbols ضروری است.

اگر system به صورت additive تنظیم شده باشد، شناسه additive-symbols ضروری است.

symbols

تعریف نمادهای استفاده شده برای برچسب‌ها (می‌تواند رشته، تصویر یا شناسه سفارشی باشد).

اگر شناسه system به صورت cyclic، numeric، alphabetic، symbolic یا fixed تنظیم شده باشد، ضروری است.

نمادهای UTF-8 HTML.

additive-symbols

تعریف تابع‌های اضافی سیستم اضافی.

سیستم شمارنده اضافی (مثل اعداد رومی) از مجموعه‌ای از نمادهای وزنی تشکیل شده است.

لیست شناسه‌ها به ترتیب کاهشی بر اساس وزن از نمادهای شمارنده و وزن‌های غیر منفی آن‌ها.

اگر شناسه system به صورت additive تنظیم شده باشد، ضروری است.

negative تعریف علامت اضافه شده به برچسب یا پسوند در صورت اینکه مقدار منفی باشد.
prefix تعریف علامت اضافه شده به برچسب.
suffix تعریف علامت اضافه شده به برچسب.
range

تعریف محدوده مقادیر سبک شمارنده.

اگر مقدار شمارنده از محدوده خارج شود، به سبک جایگزین بازمی‌گردد.

pad

اگر برچسب باید طول حداقلی داشته باشد، از این شناسه استفاده کنید.

مثلاً، اگر می‌خواهید شمارنده از 01 شروع شود و به ترتیب 02، 03، 04 و غیره باشد، از شناسه pad استفاده کنید.

برای شمارنده‌هایی که بزرگتر از مقدار pad مشخص شده باشد، برچسب به صورت معمول ساخته می‌شود.

speak-as

تعریف نحوه خواندن سبک شمارنده توسط گوینده صوتی.

مثلاً، برای لیست‌های مرتب، به عنوان عدد یا حرف خوانده می‌شود؛ برای لیست‌های نامرتب، به عنوان پیام‌های صوتی خوانده می‌شود.

fallback

تعریف نام شمارنده بازگشتی در صورت اینکه سیستم نتواند برچسب‌ها را بسازد یا خارج از محدوده مشخص شده باشد.

اگر شمارنده جایگزین یا سیستم جایگزین قادر به نمایش مقدار شمارنده نباشد، به سبک دسیمال بازمی‌گردد.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این @قانون را کاملاً پشتیبانی می‌کند.

Chrome Edge Firefox Safari Opera
91 91 33 17 77