آموزش طراحی وب

counter-reset و counter-increment در css

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

counter

فصل چهارم : Properties در CSS

جلسه بیست و نهم : counter-reset و counter-incrementدر CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان چند وقتیه که قصد دارم در رابطه با خصوصیات counter-reset و counter-incrementدر css یه مقاله تهیه کنم و در اختیارتون قرار بدم. تو اینترنت که جستجو میکردم هیچ سایتی رو پیدا نکردم که با مثال و واضح این خصوصیات رو توضیح داده باشه جز یک سایت که ترجمه شده ی خود w3school هست و درک اون هم برای دوستان مبتدی یک مقدار مشکله برای همین تصمیم گرفتم تو این مقاله بصورت کامل در رابطه با این دو خصوصیت صحبت کنم و با ذکر مثال اونهارو خدمتتون آموزش بدم.

 

خصوصیات counter-reset و counter-increment

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

 

خصوصیت counter-reset

این خصوصیت برای reset کردن شمارنده یا شروع مجدد شمارنده استفاده میشه. مثلا شما یک لیستی رو شماره گذاری میکنید و میخواین لیست دوم هم از شماره ۱ شماره گذاری بشه . در این زمان از counter-reset استفاده میشه.

 

خصوصیت counter-increment

از خصوصیت counter-increment و کلاس های کاذب (شبه انتخابگر) before و یا after و خاصیت content برای نام گذاری و اشاره به عنصر مورد نظرمون استفاده می کنیم . مثلا میگیم برای h1 نام heading رو در نظر بگیر و شمارنده و تمامی عملیات رو روی نام heading انجام بده. حالا با ذکر مثال خیلی دقیق تر متوجه ی این موارد خواهید شد.

 

تصور کنید دو سرتیتر دارید و هر کدوم از سرتیترها گزینه هایی جهت نمایش دارند. شما میخواین برای سرتیترها شمارنده ی ۱، ۲ ، ۳ و … قرار بدید و برای گزینه ها شمارنده ی سرتیتر به اضافه ی شمارنده ی گزینه هارو قرار بدید. به تصویر زیر دقت کنید:

counter-reset

همونطور که در تصویر مشاهده میکنید دو سرتیتر داریم و یکسری گزینه که به ترتیب نام گذاری شدند. این کار و ما با li ها یا با شماره گذاری دستی اعداد انجام ندادیم خیلی راحت از div و h1 استفاده کردیم . html این قسمت فقط تکه کد زیر هست:

حالا میخوایم با استفاده از خصوصیات counter-reset و counter-incrementاین شماره گذاری رو انجام بدیم. به ترتیب و مرحله ای جلو میریم.

اول سرتیترهامون رو شماره گذاری میکنیم و از خاصیت counter-increment استفاده می کنیم و نام شمارنده رو تعیین میکنیم :

در این مثال ما شمارنده رو با نام iwl-h1 نام گذاری کردیم. حالا باید بگیم که شمارنده ای که تولید میکنی رو در h1 نمایش بده . برای اینکار از شبه انتخابگر before استفاده می کنیم:

 

در مثال بالا گفتیم محتوای (content ) قبل (before) از h1 مقدار شمارنده ی iwl-h1 باشه (یعنی همون شماره هایی که تولید میکنه رو قبل از محتوای داخل عنصر h1 نمایش بده) تا اینجا ما برای سرتیترها شمارنده گذاشتیم. برای اینکه یه نقطه بعد از شماره قرار بگیره هم از “.” استفاده کردیم. تا اینجای کار رو ببینیم:

counter-increment

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

 

اسم شمارنده ی گزینه هارو iwl-div در نظر گرفتیم. تا اینجا کار به شکل زیر درمیاد:

counter-increment

حالا میخوایم شمارنده ی گزینه های زیرمجموعه ی هر سرتیتر از عدد ۱ شروع بشه و ادامه ی گزینه های قبلی نباشه. برای اینکار از reset استفاده میکنیم و میگیم به هر h1 که رسیدی شمارنده ی iwl-div رو reset کن . از خصوصیت counter-reset استفاده میکنیم:

نتیجه رو ببینیم :

counter-increment

حالا میخوایم مثل دموی اولیه که دیدید، شماره ی هر سرتیتر رو در شمارنده ی گزینه های زیرمجموعه اش ادغام کنیم و شمارنده هارو بصورت زیرمجموعه ای نمایش بدیم. برای اینکار شمارنده ی سرتیتر رو هم در contentDIV نمایش میدیم:

.countDIV:before{ content: counter(iwl-h1)”.”counter(iwl-div)” “;}

نتیجه رو ببینیم:

counter-increment

خوب دوستان دیدید که چقدر راحت تونستیم با این خصوصیات شمارنده ایجاد کنیم. حالا شمارنده میتونه هرچیزی غیر از عدد باشه ، در زیر لیستی از شمارنده ها براتون قرار دادم میتونید استفاده کنید:

هر کدوم از این شمارنده هارو که انتخاب کردید به صورت زیر استفاده کنید:

 

مرورگرهایی که این خصوصیت رو پشتیبانی میکنند

در حال حاضر تمامی مرورگرها حتی IE8 هم این خصوصیت رو پشتیبانی میکنند.

 

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

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۸

    • سلام دوست عزیز
      شماره گذاری از این روش هم برای خودش جایگاهی داره صرفا برای این مورد استفاده نمیشه و ممکنه هرجایی تو پروژتون بکارتون بیاد.
      موفق و پاینده باشید.

  • میشه از همون لیست عادی هم برای این کار استفاده کرد تا نیازی به این همه تگ نباشه و برای بحث سئو هم مشکلی پیش نیاد چون برای ایجاد لیست بهتره که از لیست استفاده کنیم تا سئو ی بهتری داشته باشیم و از قوانین کدنویسی هم پیروی کرده باشیم.

    • سلام دوست عزیز

      بله ، صد در صد برای ایجاد لیست ها از li ها استفاده می کنیم، اگر تو این مثال استفاده نکردیم به این دلیل بود که دوستان این خاصیت رو با خاصیت شماره گذاری li ها اشتباه نگیرن.
      تو مطالب اگر مثالی زده میشه صرفا برای فهم و درک اون خاصیت هست، نباید حتما این کد html رو پیاده کنید، باید نحوه ی کار با خاصیت هارو یاد بگیرید : )
      علاوه بر این شماره گذاری ساده می تونید با این خاصیت ها کارهای دیگه ای هم انجام بدید، مثلا تو ماهنامه هفتم بازی با اعداد رو گذاشتم که با همین خصوصیات طراحی شده .

      موفق و پاینده باشید.

  • قبلا مقاله توی ماهنامه رو خونده بودم ولی چون با دوتا از خاصیتهاش یعنی همینایی که اینجا آموزش دادین آشنا نبودم زیاد به اون بازی دقت نکردم و گذاشتم برا بعد ولی الان که برگشتم و یه بار دیگه با دقت کدهارو بررسی کردم بیشتر به کاربرد این خواص پی بردم.
    تشکر به خاطر توضیحاتتون.

  • مقاله خوبی بود.
    تو لیست شمارنده ها arabic-indic رو یادتون رفته!
    شماره گذاری عربی که میتونیم برای فارسی هم استفاده کنیم، انجام میده.

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین