این آموزش در تاریخ ۱۴۰۰/۱۰/۳۰ آپدیت شده است.
آموزش ویژگی counter-increment در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی counter-increment در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی counter-increment در CSS
با استفاده از ویژگی counter-increment در CSS میتوان به شمارنده هایی که توسط CSS ایجاد میشود یک واحد ( یا چندین واحد ) اضافه و یا کم کرد، که این واحدها هم میتوانند عدد مثبت باشند و هم منفی.
بفرض مثال میتونیم به راحتی با استفاده از این ویژگی برای آیتم های یک لیست نامرتب که توسط تگ UL ایجاد می شوند، شماره گذاری عددی بصورت خودکار ایجاد نماییم، یعنی دیگه خودش خودکار شماره میزنه ( همانند مثال شماره ۲ )
معمولا از این ویژگی بهمراه ویژگی های counter-reset و content مورد استفاده قرار میگیرد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی counter-increment را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : اضافه کردن شمارنده خودکار قبل از تگ های H2 در صفحه
|
1 2 3 4 |
h2::before{ counter-increment: my-sec-counter; content: counter(my-sec-counter) ". "; } |
مثال شماره ۲ : ایجاد شماره آیتم، بصورت خودکار قبل از آیتم های یک لیست نامرتب
|
1 2 3 |
ul li { counter-increment: My-Item; } |
مثال شماره ۳ : ایجاد شماره سطر، بصورت خودکار قبل از سطرهای یک جدول
|
1 2 3 4 |
/* خوده سلول ردیف نباید شمارش بشه */ tr:not(#first-row) { counter-increment: My-Item; } |
مثال شماره ۴ : شماره گذاری خودکار فهرستی از تیترهای موجود در صفحه
|
1 2 3 4 5 6 7 8 9 |
h2::before{ counter-increment: section; content: "» " counter(section) ": "; } h3::before{ counter-increment: subsection; content: counter(section) "." counter(subsection) " "; } |
مثال شماره ۵ : تنظیم پرش بین واحدهای شمارنده – عدد مثبت ( چهارتا ، چهارتا )
|
1 2 3 |
h2::before { counter-increment: my-sec-counter 4; } |
مثال شماره ۶ : تنظیم پرش بین واحدهای شمارنده – عدد منفی ( دوتا ، دوتا )
|
1 2 3 |
h2::before { counter-increment: my-sec-counter -2; } |
Free-Learn
جدول مشخصات ویژگی counter-increment در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.counterIncrement=”counter_reset_ID“; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی counter-increment در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| counter-increment | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
counter-increment: none|ID|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی counter-increment در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| none | مقدار پیش فرض – هیچ شمارنده ای انتخاب / اضافه نخواهد شد |
| ID | Number | ID اون شمارنده ای که باید بهش یک واحد اضافه بشه را مشخص میکند و اگر از عدد مثبت یا منفی در کنار ID استفاده شود میتوان میزان پرش بین واحدهای اضافه شده را مشخص کرد ( همانند مثال های شماره ۵ و ۶ ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- معمولا و بیشتر از ویژگی counter-increment بهمراه ویژگی counter-reset ( برای ایجاد یا ریست کردن شمارنده ) و ویژگی content ( برای گذاشتن محتوا به قبل یا بعد از یک تگ ) مورد استفاده قرار میگیرد.
- برای قرار دادن محتوا به قبل یا بعد یک عنصر باید از ۲ شبه عنصر after:: و before:: استفاده کرد.
