العدادات وأنماط القوائم

إنّ أفضل طريقة لتمثيل العديد من أنواع المحتوى هي استخدام قائمة HTML. بالنسبة إلى محتوى القوائم المرتبة، مثل خطوات وصفة طعام أو حواشي سفلية لمقالة، غالبًا ما يحتوي العلامة أيضًا على معلومات. توفّر CSS عدة طرق للتحكّم في العدادات في قائمة.

أنماط القوائم

هناك مجموعة كبيرة من أنواع أنماط القوائم المحدّدة مسبقًا التي تتوافق مع الأرقام والأحرف الأبجدية والأرقام الرومانية والعديد من أنظمة العد الدولية.

بالإضافة إلى الأنماط التي تتوافق مع المتصفّحات، نشرت W3C أنماط عدّاد جاهزة تتوافق مع 181 نمطًا إضافيًا في 45 نظام كتابة.

إذا لم تلائم هذه الخيارات احتياجاتك، يمكنك أيضًا تحديد @counter-style مخصّص. يتيح لك ذلك تحديد رموز مخصّصة وبادئة ولاحقة وغير ذلك.

يكون رمز العنصر تلقائيًا outside القائمة، ويتم وضعه أمام القائمة، ويتم محاذاته إلى اليمين. يمكنك أيضًا وضع علامة العنصر داخل القائمة باستخدام list-style-position: inside.

العدادات

في حين تتحكّم أنماط القوائم في طريقة عرض علامات عناصر القائمة، تتيح لك العدادات التحكّم في القيم التي سيتم عرضها. بالنسبة إلى عناصر <li> في القائمة، ينشئ المتصفّح عدّادًا باسم list-item يتم زيادته بمقدار 1 لكل عنصر قائمة يتم العثور عليه.

تحتفظ عدّادات CSS بعدد مرات عرض عنصر تم ضبط قيمة counter-increment مقابلة له.

لإنشاء عدّاد جديد، استخدِم counter-reset مع اسم عدّاد وقيمة أولية اختيارية. يتم غالبًا ضبط هذه السمة على عنصر رئيسي يتضمّن جميع العناصر التي سيتم احتسابها.

بعد ذلك، أضِف السمة counter-increment إلى كل عنصر تريد احتسابه.

أخيرًا، اعرض قيمة العداد باستخدام الدالة counter().

في هذا المثال، نريد عرض العدد المتسلسل للحواشي السفلية كنص الرابط لكل حاشية سفلية. بما أنّنا نريد عدّادًا واحدًا للمستند بأكمله، نضبط counter-reset: note على النص الأساسي، ونزيد العدد في كل رابط حاشية سفلية.

يمكنك أيضًا استخدام عدّادات متعددة لحساب عناصر مختلفة. في مثال الحواشي السفلية، ماذا لو أردت عرض فهرس القسم والفقرة التي تتضمّن الحاشية السفلية؟

يمكن إنشاء عدد الأقسام في النص الأساسي باستخدام counter-reset، ثم زيادته في كل عنصر <h2>. نريد إعادة ضبط عدد الفقرات لكل قسم، لذا سنستخدم counter-reset في عناصر <h2>، وسنزيد العدد في عناصر <p>.

أخيرًا، نجمع قيم العداد في الموقع content.

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

العدادات المدمجة

ماذا يحدث عند تضمين قائمة داخل قائمة؟ يتمّ ضبط عدّاد list-item على القيمة الأولية لكلّ عنصر <ul> أو <ol>، ولا يؤدي استخدام counter() إلا إلى عرض عدد مرات الظهور الأقرب. إذا كنت تريد عرض عدد مرات الظهور من كل عدّاد من العدادات المتداخلة، استخدِم الدالة counters() التي تأخذ اسم عدّاد وفاصل.

li::marker {
  content: counters(list-item, ".")
  }

عكس العدادات

تبدأ العدادات تلقائيًا (بما في ذلك العداد list-item الضمني لعناصر <ol>) من 0، ويتم احتسابها بزيادة واحد لكل عنصر، ما يعني أنّه سيتم احتساب العنصر الأول على أنّه 1. ماذا لو أردت العدّ تنازليًا إلى 1؟

لإجراء ذلك، أضِف السمة reversed إلى <ol>. إذا كنت تستخدم نمط القائمة العادي، ستعمل العلامات على النحو المتوقّع. ومع ذلك، إذا كنت تستخدم عدّادًا مخصّصًا، عليك ضبط counter-increment على قيمة سالبة، واحتساب قيمة البدء للعدّاد يدويًا.