CSSالعدادات
- مفهوم العدادات
- خصائص التعداد التلقائي
- بناء عدادات مترابطة
- تحديد نوع التعداد و أسلوب العدد
- تعديل خصائص التعداد في القوائم
مفهوم العدادات
نستخدم العدادات ( Counters ) للحصول على ترقيم تلقائي للعناصر، بمعنى أننا نستطيع استخدامها لإظهار أرقام بشكل تلقائي بجانب العناصر و أهم ما يميزها أنه يمكننا إظهار الأرقام باللغة و الشكل الذي نريده.
Apple
Banana
Blueberry
خصائص التعداد التلقائي
لإظهار تعداد تلقائي نحتاج استخدام الخصائص التالية:
- counter-reset نضعها في العنصر الأب الذي سيتم إظهار العدادات بداخله و نستخدمها لإنشاء العدادات و إعطاءها قيمة أولية.
- counter-increment نضعها في العنصر الذي نريد إظهار التعداد فيه و نعطيها إسم العداد الذي نريد استخدامه كقيمة، و يمكن هنا تحديد كيف ستزيد أو ستنقص قيمة العداد.
- content نضعها في العنصر الذي نريد إظهار التعداد فيه للتحكم في محتوى العداد، و نستخدم الدالة counter() أو الدالة counters() لإظهار رقم التعداد الخاص بالعنصر على حسب موقعه في الصفحة.
الخاصية counter-reset يمكنك وضعها مع خصائص العنصر body أو في الوسم الأب للعناصر التي ستظهر لها التعداد.
الخاصيتين counter-increment و content نستعملهما في بداية أو نهاية العنصر التي يتم تحديدها بواسطة ::before أو ::after
إظهار تعداد
في المثال التالي قمنا بإظهار تعداد تلقائي في بداية كل عنصر <h2> مع إظهار نقطة بعده.
مثال
دمج التعداد مع نص
في المثال التالي قمنا بإظهار تعداد التلقائي في بداية كل عنصر <h2> مع عرض كلمة قبله و شرطة بعده.
مثال
تحسين تصميم التعداد
التعداد الذي يتم إظهاره في بداية أو نهاية العناصر يمكنك تعديل تصميمه كأي عنصر آخر موجد في الصفحة فمثلاً يمكنك تغيير لونه، لون خلفيته، ميلان حدوده إلخ..
مثال
بناء عدادات مترابطة
القصد من العدادات المترابطة هو استخدام أكثر من عداد في ذات الوقت و عرض قيمة العدادات في وقت واحد للعنصر.
في المثال التالي قمنا بإنشاء عدّاد تلقائي في الصفحة إسمه section
سنظهره في بداية كل عنصر <h2> و عند كل عنصر <h2> قمنا بإنشاء عدّاد إسمه subsection
لكي يتم استخدامه للعناصر الموضوعة بعده مباشرةً.
مثال
تحديد نوع التعداد و أسلوب العدد
إفتراضياً، نوع التعداد هو decimal
و قيمة العدّاد الأساسية هي 0 و الدالة counter() تجعل قيمة العدّاد تزداد واحداً مع كل عنصر يتم عرضه.
إظهار تعداد فردي
في المثال التالي قمنا بإنشاء عداد إسمه odd
و قيمته الأولية 1- و من ثم جعلنا قيمته تزداد بمقدار 2 في كل مرة لكي يظهر التعداد بشكل فردي ( Odd ).
مثال
إظهار تعداد زوجي
في المثال التالي قمنا بإنشاء عداد إسمه even
و من ثم جعلنا قيمته تزداد بمقدار 2 في كل مرة لكي يظهر التعداد بشكل زوجي ( Even ).
مثال
تحديد نوع التعداد
بعد وضع إسم العدّاد في الدالة counter() يمكن إضافة نوعية الترقيم الذي سيظهر سواء عشري، روماني، إنجليزي، هندي (أرقام عربية) إلخ..
مثال
تعديل خصائص التعداد في القوائم
وسوم <li> التي يتم وضعها في الصفحة بداخل وسم <ol> أو <ul> يظهر في أولها تعداد تلقائي على شكل أرقام، أو أحرف أو حتى رموز على حسب النوع الذي تحدده أنت.
إذا أردت استبدال أسلوب التعداد التلقائي في <li> بأسلوب آخر يمكنك استخدام المحدد li::marker { } و من ثم تعريف التعداد بالشكل الذي تريده.
في المثال التالي استخدمنا المحدد ::marker لتعديل تصميم محدد الوسم <li> الإفتراضي.