38- عدادات CSS (CSS Counters)

عدادات CSS هي أشبه بـ “متغيرات” يتم إنشاؤها وإدارتها بواسطة لغة CSS. يمكن لهذه المتغيرات أن تتغير (تزداد قيمتها) بناءً على قواعد CSS التي تتحكم بعدد مرات استخدامها في المستند. تتيح لك عدادات CSS تعديل مظهر المحتوى بناءً على موقعه ضمن الصفحة.

ترقيم تلقائي باستخدام العدادات

عدادات CSS تشبه المتغيرات، حيث يمكن لهذه المتغيرات أن تتغير (تزداد قيمتها) بناءً على قواعد CSS التي تتحكم بعدد مرات استخدامها.

لاستخدام عدادات CSS، نحتاج إلى استخدام الخصائص التالية:

• counter-reset – لإنشاء أو إعادة تعيين قيمة العداد
• counter-increment – لزيادة قيمة العداد
• content – لإدراج محتوى يتم إنشاؤه ديناميكيًا
• دالة counter() أو counters() – لإضافة قيمة العداد إلى عنصر

لاستخدام عداد CSS، يجب أولاً إنشاؤه باستخدام الخاصية counter-reset.

يظهر المثال التالي كيفية إنشاء عداد للصفحة بأكملها (باستهداف عنصر body)، ثم يقوم بزيادة قيمة العداد لكل عنصر <h2> ويضيف عبارة “قسم <قيمة العداد>:” إلى بداية كل عنصر <h2>.

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

تعشين العدادات (Nesting Counters)

يُنشئ المثال التالي عدادين:

• عداد للصفحة بأكملها (قسم)
• عداد لكل عنصر <h1> (فرع قسم)

سيحتسب العداد “قسم” لكل عنصر <h1> ويعرض “قسم <قيمة عداد القسم>.”، بينما سيحتسب العداد “فرع قسم” لكل عنصر <h2> ويعرض “<قيمة عداد القسم>.<قيمة عداد فرع القسم>”.

بتعشين العدادات، يمكنك إنشاء تسلسل هرمي للترقيم، على سبيل المثال ترقيم الأقسام ثم ترقيم العناوين الفرعية داخل كل قسم.

ملاحظة:

يعتمد المثال المترجم على فهم المستخدم للمثال السابق حول عدادات CSS.

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

فائدة أخرى لعدادات CSS: إنشاء قوائم مُحاطة

تعد عدادات CSS مفيدة أيضًا في إنشاء قوائم مُحاطة (outlined lists) لأن نظام التعشين التلقائي للعدادات ينشئ مثيلات جديدة عند استخدامها داخل عناصر فرعية.

في هذا المثال، نستخدم دالة counters() لإدراج نص فاصل بين مستويات التعشين المختلفة للعدادات.

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

خصائص عدادات CSS