شمارنده ها در CSS (قسمت اول)

مقدمه

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

شاید تا الان این کار را به صورت دستی یا از طریق برنامه نویسی سمت سرور یا به وسیله جاوااسکریپت انجام داده باشید. در این مطلب می خواهیم انجام این کار را به صورت خودکار از طریق CSS با هم بررسی کنیم.

 

ویژگی ها

شمارنده های CSS با دو ویژگی counter-reset و counter-increment کنترل می شوند و در نهایت به وسیله تابع ()counter در ویژگی content انتخابگر before:: قرار گرفته و قابل نمایش می شوند. اگر با انتخابگر before:: آشنا نیستید این مطلب را بخوانید.

 

counter-reset

از ویژگی counter-reset استفاده می کنیم تا شمارنده را تعریف کنیم این تعریف با تعیین نام شمارنده و عدد شروع آن انجام می پذیرد. به صورت پیشفرض شروع شمارش از عدد یک می باشد ولی برای تغییر آن می توان در این ویژگی این کار را انجام داد. در زیر روش های ممکن برای تعریف شمارنده نشان داده شده است.

 

counter-reset: my-counter; /* از عدد 1 شروع به شمارش می کند. */
counter-reset: section 4; /* از عدد 5 شروع به شمارش می کند. */
counter-reset: counter_1 -1; /* از عدد 0 شروع به شمارش می کند. */

 

 

counter-increment

counter-increment تعیین می کند که شمارنده چندتا چندتا افزایش پیدا کند. اگر عدد تعیین نشود به صورت پیشفرض افزایش به صورت یکی یکی می باشد. اگر عدد منفی تعیین شود هر دفعه شمارنده کاهش پیدا می کند.

مثال زیر بیان می کند هر بار که تگ h2 در تگ article دیده شد به شمارنده my-counter یک عدد اضافه کن.
 

article h2
{
  counter-increment: my-counter;
}

 

و در این مثال به ازای هر بار که h2 اتفاق می افتد یک عدد از شمارنده کم می شود.

 

article h2
{
  counter-increment: my-counter -1;
}

 

 

تابع ()counter

این تابع دو پارامتر می پذیرد, پارامتر اول نام شمارنده است و پارامتر دوم استایل شمارنده است. سپس خروجی که شمارنده است را در ویژگی content قرار می دهد. اگر استایل را برای این تابع تعریف نکنیم به صورت پیشفرض شمارنده را به عنوان یک عدد ده دهی نشان می دهد.
به عنوان مثل:

 

h2:before
{
  content: counter(counter-name);
}

 

مقادیری که این تابع به عنوان استایل می پذیرد به شرح زیر است:

 

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian |  georgian | lower-alpha | upper-alpha | none | inherit

 

به عنوان مثال:

 

ul li:before
{
  content: counter(counter-name, circle);
}

 

برای یک مثال کاربردی می خواهیم بخش های مختلف یک مقاله را شماره گذاری کنیم. در این مثال مراحل انجام کار کامنت گذاری شده اند.

 

See the Pen CSS Counter by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

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