آشنایی بیشتر با ۵۰ ویژگی جالب CSS (جلسه ۱۸) : Counter یا شمارنده – قسمت ۳

css3 attributes

همونطور که دیدید در جلسه گذشته مثالی ابتدایی در مورد CSS Counter زدیم و شما رو با اون آشنا کردیم. در این جلسه میخوایم مثالهای پیشرفته‌تری رو بهتون توضیح بدیم و شما رو بصورت کامل با قابلیتهای شمارشگرها آشنا کنیم.

دست کاری در مقدار اضافه کردن

ویژگی counter-increment علاوه بر نام شمارشگر، یک عدد مثبت یا منفی رو میتونه دریافت کنه و با اینکار میتونیم در مقدار اضافه شدن به شمارشگر، تغییراتی رو به وجود بیاریم. اگر هیچ عددی رو برای این ویژگی قرار ندیم، بصورت پیش فرض عدد ۱ یا ۱+ قرار داده خواهد شد و شمارشگر در هر بار فقط ۱ واحد افزایش خواهد یافت. حالا برای اینکه مثلا بجای یک واحد، دو واحد اضافه بشه، میتونیم عدد ۲ یا ۲+ رو قرار بدیم. کد زیر رو در نظر بگیرید:

.numbered-list__counter {
    counter-increment: increase 2; /* counter-increment: increase +2; */
}

حالا اگر خروجی رو ببینید، بصورت زیر خواهد بود:css counter 4

همونطور که میبینید شمارشگر ۲ تا ۲ تا اضافه شده است. همچنین میتونیم از اعداد منفی هم استفاده کنیم:

.numbered-list__counter {
    counter-increment: increase -2;
}

خروجی در مرورگر بصورت زیر هست:css counter 5

همونطور که دیدید ۲ تا ۲ تا کم شده است.

تغییر دادن مقدار اولیه شمارشگر

همونطور که میدونین با استفاده از ویژگی counter-reset میتونیم یک شمارشگر رو بسازیم و یا به حالت اولیه برگردونیم و کاری کنیم که از ابتدا شروع به شمارش بکنه. حالا اگر علاوه بر نام شمارشگر، یک عدد هم به اون نسبت بدین، باعث میشه که مقدار اولیه شمارشگر تغییر کنه. مقدار اولیه شمارشگر بصورت پیش فرض ۰ هست. مثلا کد زیر رو در نظر بگیرید:

.numbered-list {
    counter-reset: increase 2;
}

با اینکار مقدار اولیه ۲ خواهد شد و هر بار که عددی رو به اون اضافه میکنیم، اعداد بجای ۰ به ۲ اضافه خواهد شد. خروجی بصورت زیر هست:css counter 6

همونطور که دیدید مقدار اولیه شمارشگر ۲ هست و یکی یکی به اون اضافه شده. به همین دلیل هست که در منوی بالا از ۳ شروع میشه. میتونین برای این ویژگی هم مقدار منفی قرار بدین و کاری کنید که آیتمها از عدد منفی شروع به اضافه شدن بکنند.

معکوس کردن شمارشگر

اگر شما یک منو داشته باشید که تعداد آیتمهای اون ثابت باشه و بدونین که چنتا هست میتونین با استفاده از CSS خالص این کار رو انجام بدین و کاری کنید که شمارشگر بصورت معکوس قرار داده بشه. مثلا اگر تعداد آیتمها ۴ تا باشه، میتونیم بصورت زیر عمل کنیم:

.numbered-list {
    counter-reset: increase 5;
}

.numbered-list__counter {
    counter-increment: increase -1;
}

همونطور که دیدید مقدار اولیه رو ۵ قرار دادیم (یعنی یکی بیشتر از تعداد آیتمها) و بعد از اون مقدار شمارشگر رو یکی یکی کم کردیم. خروجی بصورت زیر میشه:css counter 7

همونطور که دیدید عددها بصورت معکوس قرار داده شدن. اما اگر تعداد آیتمها رو ندونید، باید با زبانهای دیگه و بصورت داینامیک این کار رو انجام بدیم. مثلا میتونین با استفاده از PHP چنین کدی رو قرار بدین:

    total_count; $i++): ?>

با اینکار میایم تعداد آیتمها رو پیدا میکنیم و درون ویژگی Style المنت مورد نظر، ویژگی counter-reset رو تعریف میکنیم و بعد درون CSS اون رو یکی یکی کم میکنیم.

استفاده از فرمتهای دیگر شمارشگر

همونطور که تا اینجای کار دیدید ما فقط با عددها سر و کار داشتیم و اونا رو کم و زیاد میکردیم. اما ما میتونیم دیگر فرمتها رو هم قرار بدیم. مثلا میتونیم اعداد یونانی یا لاتین و … رو قرار بدین. فرمتهایی که میتونین از اونا استفاده کنید، به شرح زیر هستند:

  • disc (• • •)
  • circle (○ ○ ○)
  • square ( ▪ ▪ ▪)
  • decimal (1 2 3)
  • decimal-leading-zero (01, 02, 03)
  • lower-roman (i ii iii)
  • upper-roman (I II III)
  • lower-greek (α β γ)
  • lower-latin (a b c)
  • upper-latin (A B C)
  • armenian (Ա Բ Գ)
  • georgian (ა ბ გ)
  • lower-alpha (a b c)
  • upper-alpha (A B C)

این موارد در بیشتر مرورگرها پشتیبانی میشن. مقدار پیش فرض همون decimal هست که بصورت عددی نمایش داده میشه. برای اینکه فرمت رو تغییر بدیم، باید به عنوان ورودی دوم تابع counter یکی از موارد بالا رو قرار بدیم. مثلا برای قرار دادن اعداد رومی بزرگ بصورت زیر عمل میکنیم:

.numbered-list__counter:before {
    content: counter(increase, upper-roman);
}

حالا اگر خروجی رو ببینیم بصورت زیر خواهد بود:css counter 8

همچنین موارد دیگه ای هم وجود دارن که همه مرورگرها از اون پشتیبانی نمیکنن. مثلا میتونین از فرمت persian استفاده کنید و اعداد رو بصورت فارسی نمایش بدین. برای اینکار بصورت زیر عمل میکنیم:

.numbered-list__counter:before {
    content: counter(increase, persian);
}

خروجی در مرورگر:css counter 9

همونطور که دیدید اعداد بصورت فارسی نمایش داده میشن. پس دیدید که چقدر راحت میشه با استفاده از CSS Counter کارهای شمارشی رو انجام داد. امیدوارم بتونین از اون بخوبی استفاده کنید.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0