CSSالعدادات

مفهوم العدادات

نستخدم العدادات ( Counters ) للحصول على ترقيم تلقائي للعناصر، بمعنى أننا نستطيع استخدامها لإظهار أرقام بشكل تلقائي بجانب العناصر و أهم ما يميزها أنه يمكننا إظهار الأرقام باللغة و الشكل الذي نريده.

في هذا الدرس ستتعلم كيفية بناء عداد تلقائي للعناصر، تحديد نوع ترقيمه و إظهاره بشكل مناسب خطوة خطوة.

خصائص التعداد التلقائي

لإظهار تعداد تلقائي نحتاج استخدام الخصائص التالية:

• counter-reset نضعها في العنصر الأب الذي سيتم إظهار العدادات بداخله و نستخدمها لإنشاء العدادات و إعطاءها قيمة أولية.
• counter-increment نضعها في العنصر الذي نريد إظهار التعداد فيه و نعطيها إسم العداد الذي نريد استخدامه كقيمة، و يمكن هنا تحديد كيف ستزيد أو ستنقص قيمة العداد.
• content نضعها في العنصر الذي نريد إظهار التعداد فيه للتحكم في محتوى العداد، و نستخدم الدالة counter() أو الدالة counters() لإظهار رقم التعداد الخاص بالعنصر على حسب موقعه في الصفحة.

إظهار تعداد

في المثال التالي قمنا بإظهار تعداد تلقائي في بداية كل عنصر <h2> مع إظهار نقطة بعده.

body {
    counter-reset: section;
}

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

دمج التعداد مع نص

في المثال التالي قمنا بإظهار تعداد التلقائي في بداية كل عنصر <h2> مع عرض كلمة قبله و شرطة بعده.

body {
    counter-reset: section;
}

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

تحسين تصميم التعداد

التعداد الذي يتم إظهاره في بداية أو نهاية العناصر يمكنك تعديل تصميمه كأي عنصر آخر موجد في الصفحة فمثلاً يمكنك تغيير لونه، لون خلفيته، ميلان حدوده إلخ..

body {
    font-family: arial;
    counter-reset: section;
}

h2 {
    font-size: 20px;
    margin-top: 26px;
}

h2::before {
    counter-increment: section;
    content: counter(section);
    color: white;
    background: brown;
    margin-right: 6px;
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 12px;
}

بناء عدادات مترابطة

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

في المثال التالي قمنا بإنشاء عدّاد تلقائي في الصفحة إسمه section سنظهره في بداية كل عنصر <h2> و عند كل عنصر <h2> قمنا بإنشاء عدّاد إسمه subsection لكي يتم استخدامه للعناصر الموضوعة بعده مباشرةً.

body {
    counter-reset: section;
}

h2 {
    counter-reset: subsection;
}

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

تحديد نوع التعداد و أسلوب العدد

إفتراضياً، نوع التعداد هو decimal و قيمة العدّاد الأساسية هي صفر، و الدالة counter() تجعل قيمة العدّاد تزداد واحداً مع كل عنصر يتم عرضه.

إظهار تعداد فردي

في المثال التالي قمنا بإنشاء عداد إسمه odd و قيمته الأولية 1- و من ثم جعلنا قيمته تزداد بمقدار 2 في كل مرة لكي يظهر التعداد بشكل فردي ( Odd ).

body {
    counter-reset: odd -1;
}

.odd-list li {
    counter-increment: odd 2;
}

.odd-list li::marker {
    counter(odd);
    content: counter(odd) ". ";
}

إظهار تعداد زوجي

في المثال التالي قمنا بإنشاء عداد إسمه even و من ثم جعلنا قيمته تزداد بمقدار 2 في كل مرة لكي يظهر التعداد بشكل زوجي ( Even ).

body {
    counter-reset: even;
}

.even-list li {
    counter-increment: even 2;
}

.even-list li::marker {
    counter(even);
    content: counter(even) ". ";
}

تحديد نوع التعداد

بعد وضع إسم العدّاد في الدالة counter() يمكن إضافة نوعية الترقيم الذي سيظهر سواء عشري، روماني، إنجليزي، هندي (أرقام عربية) إلخ..

body {
    counter-reset: section;
}
            
h2::before {
    counter-increment: section;
    content: counter(section, lower-alpha) ") ";
}

تعديل خصائص التعداد في القوائم

وسوم <li> التي يتم وضعها في الصفحة بداخل وسم <ol> أو <ul> يظهر في أولها تعداد تلقائي على شكل أرقام، أو أحرف أو حتى رموز على حسب النوع الذي تحدده أنت.

يمكنك استبدال أسلوب التعداد التلقائي في <li> بأسلوب آخر باستخدام المحدد li::marker { } و من ثم تعريف التعداد بالشكل الذي تريده.

في المثال التالي استخدمنا المحدد li::marker { } لتعديل تصميم محدد الوسم <li> الإفتراضي.

ul li::marker {
    color: red;
}

ol li::marker {
    color: dodgerblue;
    font-weight: bold;
    font-family: tahoma;
    font-size: 13px;
}