كيفية ترقيم العناصر تلقائياً بكفاءة باستخدام عدادات CSS

تُعد عدادات CSS (CSS counters) ميزة قوية ومرنة في لغة تنسيق الأنماط المتتالية، تُستخدم لإضافة ترقيم تلقائي للعناصر داخل صفحات الويب. تعمل هذه العدادات من خلال توفير متغيرات يمكن تهيئتها (باستخدام الخاصية counter-reset)، ثم زيادتها أو إنقاصها بواسطة قواعد CSS. على الرغم من إمكانياتها الهائلة، يغفل العديد من المطورين عن هذه الميزة القيمة. في هذا الدليل الشامل، سنتعمق في كيفية الاستفادة من عدادات CSS لتبسيط مهام الترقيم وجعلها أكثر ديناميكية.

متى تستخدم عدادات CSS؟

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

• ترقيم القوائم المعقدة: سواء كانت قوائم متداخلة أو قوائم تحتاج إلى تنسيق ترقيم خاص.
• إنشاء روابط ترقيم صفحات (Pagination) ديناميكية: لتسهيل التنقل بين صفحات المحتوى الكبيرة دون الحاجة لترقيم يدوي.
• ترقيم الخطوات في أنظمة الإعداد الأولية (On-boarding Systems): لتوجيه المستخدمين عبر سلسلة من الإجراءات بشكل واضح ومنظم.

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

فهم نظام عدادات CSS

يتألف نظام عدادات CSS من مجموعة من الخصائص والدوال الأساسية التي تعمل معًا لتحقيق الترقيم التلقائي. هذه المكونات هي: الخاصية counter-reset، الخاصية counter-increment، الدالة counter()، الدالة counters()، والخاصية content. لفهم كيفية عمل هذا النظام، دعنا نلقي نظرة فاحصة على كل من هذه الخصائص والدوال.

شرح خصائص العدادات

• counter-reset: تُستخدم هذه الخاصية لتهيئة أو إعادة تعيين العداد. يجب عليك دائمًا إنشاء عداد جديد أو إعادة تعيين عداد موجود باستخدام هذه الخاصية قبل استخدامه.
• counter-increment: تُستخدم لزيادة قيمة متغير العداد الذي تم تهيئته مسبقًا. يمكنك تحديد مقدار الزيادة (افتراضياً 1).
• counter(): هذه الدالة هي جوهر عملية الترقيم. تُستخدم داخل الخاصية content، عادةً مع المحددات الزائفة (pseudo-selectors) مثل :before أو :after، لإضافة قيمة العداد إلى العنصر.
• counters(): تُستخدم للترقيم المتسلسل أو الموروث، حيث تقوم بإنشاء مثيل لمتغير عداد الأب في العنصر الابن، مما يتيح ترقيمًا هرميًا مثل (1.1, 1.2.1).
• content: تُستخدم لإضافة قيمة العداد (أو أي سلاسل نصية) إلى العنصر، وذلك بتعديل محتوى المحددات الزائفة :before و :after.

الآن بعد أن فهمنا هذه الخصائص والقيم الأساسية لعدادات CSS، دعنا ننتقل إلى الأمثلة العملية.

ترقيم العناصر في صفحة الويب

بينما يمكن تحقيق الترقيم الأساسي باستخدام HTML، توفر عدادات CSS طرقًا ديناميكية وسهلة التحكم لإنجاز هذه المهمة. الأمثلة التالية ستوضح كيفية ترقيم العناصر في صفحة الويب باستخدام CSS.

سنبدأ بترقيم بسيط أحادي المستوى، ثم ننتقل إلى مثال أكثر تقدمًا لإنشاء جدول محتويات متداخل.

ترقيم بسيط

في هذا المثال، سنقوم بإنشاء عداد بسيط للعناصر باستخدام CSS. ابدأ بإنشاء هيكل العناصر في ملف HTML الخاص بك كما يلي:

<div>
    <p>Mercury</p>
    <p>Venus</p>
    <p>Earth</p>
</div>

الآن، في ملف CSS، سنقوم بثلاث خطوات أساسية:

1. تهيئة العداد على العنصر الأب <div> باستخدام الخاصية counter-reset.
2. زيادة قيمة العداد بمقدار 1 على العنصر الابن <p> داخل <div> باستخدام الخاصية counter-increment.
3. إضافة متغيرات العداد قبل محتوى العنصر <p> باستخدام المحدد الزائف :before.

إليك كود CSS:

div {
    list-style-type: none;
    counter-reset: css-counter 0; /* تهيئة العداد إلى 0؛ استخدم -1 للترقيم الذي يبدأ من الصفر */
}

div p {
    counter-increment: css-counter 1; /* زيادة العداد بمقدار 1 */
}

div p:before {
    content: counter(css-counter) ". "; /* تطبيق العداد قبل محتوى العناصر الأبناء */
}

النتيجة ستكون كالتالي:

لقد تم الترقيم أعلاه بالكامل باستخدام CSS النقي. أليس هذا مثيرًا للاهتمام؟ الآن، دعنا ننتقل إلى تطبيق ترقيم أكثر تعقيدًا يبرز قيمة تعلم عدادات CSS. سنقوم بترقيم العناصر المتداخلة باستخدام الدالة counters()، التي تُستخدم للترقيم الموروث وتوليد مثيل لعداد الأب في العنصر الابن.

ترقيم جدول المحتويات المتداخل

لإنشاء ترقيم متداخل يشبه جدول المحتويات، سنستخدم هيكل HTML التالي الذي يتضمن قوائم غير مرتبة <ul> متداخلة:

<ul>
    <li>Web Development
        <ul>
            <li>HTML</li>
            <li>CSS
                <ul>
                    <li>CSS Introduction</li>
                    <li>CSS Selectors</li>
                    <li>CSS Animation</li>
                </ul>
            </li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Graphics Design</li>
    <li>Computer Education</li>
</ul>

كود CSS لتحقيق الترقيم المتداخل يبدو كالتالي:

ul {
    list-style-type: none;
    counter-reset: css-counters 0; /* تهيئة العداد، اضبط -1 للعدادات التي تبدأ من الصفر */
}

ul li:before {
    counter-increment: css-counters;
    content: counters(css-counters, ".") " "; /* يولد عدادات موروثة من العناصر الأب */
}

النتيجة ستكون:

الآن يمكنك أن ترى قوة ترقيم العناصر المتداخلة باستخدام الدالة counters(). هذه الميزة توفر عليك عناء التداخل غير الصحيح، وتساعدك على تجنب الأخطاء من خلال وراثة خصائص العداد من العناصر الأب وإلحاق عداد العنصر الابن بها. بعد أن أصبحنا متمكنين من ترقيم العناصر، ما الخطوة التالية؟

إنشاء ترقيم صفحات ديناميكي (Dynamic Pagination)

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

كيف؟ باستخدام دالة counter(). بنفس الطريقة التي قمنا بها بزيادة قيم العدادات للترقيم أعلاه، يمكننا أيضًا إنشاء قائمة ترقيم صفحات ديناميكية باستخدام (كما خمنت) عدادات CSS. دعنا نبدأ:

<ul>
    <li class="previous">&lt;</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="next">&gt;</li>
</ul>

ملاحظة: لا تحتاج إلى إضافة أرقام داخل عناصر <li>، ويمكنك إنشاء العدد الذي تريده من العناصر. ستقوم عدادات CSS الخاصة بنا بالترقيم نيابةً عنا.

كود CSS يبدو كالتالي:

ul {
    list-style-type: none;
    counter-reset: paginate-counter 0;
}

ul li {
    border: solid 3px #ccc;
    color: #36f;
    padding: 8px 10px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    float: left; /* للحفاظ على العناصر في سطر واحد */
    margin: 5px; /* لإضافة مسافة بين العناصر */
    border-radius: 5px; /* لإضافة حواف دائرية */
}

/* تطبيق الأنماط على النص الداخلي */
ul li:not(.previous):not(.next):before {
    counter-increment: paginate-counter;
    content: counter(paginate-counter);
}

النتيجة ستكون:

ما هي الأفكار الأخرى التي تخطر ببالك لاستخدام عدادات CSS؟ شاركنا إبداعاتك!

الخلاصة التقنية

تُعد عدادات CSS أداة قوية ومرنة تتجاوز مجرد الترقيم البسيط. إنها توفر للمطورين القدرة على إنشاء أنظمة ترقيم معقدة وديناميكية بالكامل من جانب العميل، مما يقلل الاعتماد على JavaScript أو المعالجة من جانب الخادم في العديد من السيناريوهات. من خلال فهم خصائص مثل counter-reset و counter-increment والدوال counter() و counters()، يمكن للمطورين بناء قوائم متداخلة، جداول محتويات تفاعلية، وأنظمة ترقيم صفحات فعالة بطريقة نظيفة ومحسنة للأداء. هذه الميزة، التي غالبًا ما يتم التغاضي عنها، تفتح آفاقًا جديدة لتصميم تجارب مستخدم غنية ومنظمة.