شرح صفوف ومحتوى الفقرة
من أبرز التطبيقات العملية للعدادات في واجهات الويب تصميم شريط خطوات التسجيل أو إتمام الطلب. فعند دمج تخطيط الصندوق المرن على قائمة مرتبة مع counter-reset: step وتنسيق .step::before كشارة دائرية متوسطة، يؤدي إدراج خطوة جديدة أو حذف خطوة إلى تحديث جميع الأرقام تلقائياً في الواجهتين العربية والإنجليزية معاً.
.stepper { display: flex; gap: 12px; counter-reset: step; }
.step { counter-increment: step; }
.step::before {
content: counter(step);
width: 28px;
height: 28px;
border-radius: 50%;
}| الأداة | مثال الصياغة | موضع التطبيق | الوظيفة الأساسية |
|---|---|---|---|
counter-reset | counter-reset: step 0 | الحاوية الأب | إنشاء نطاق العداد وضبط قيمته الابتدائية |
counter-increment | counter-increment: step 1 | العنصر المتكرر | زيادة قيمة العداد أو إنقاصها عند كل عنصر |
counter() | counter(step, decimal) | ::before أو ::after | إخراج قيمة عداد أحادي المستوى وتنسيقه |
counters() | counters(item, ".") | عناصر القوائم المتداخلة | دمج مستويات التداخل الهرمية مثل 1.2.1 |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت تهيئة نطاقات الترقيم عبر counter-reset، والتحكم في خطوة الزيادة أو العد التنازلي عبر counter-increment، وتنسيق الأرقام بدالة counter()، وبناء الفهارس الهرمية المتداخلة بدالة counters(). وتتمثل الخطوة التالية في الانتقال إلى درس القوائم المنسدلة في لغة CSS لبناء قوائم تنقل احترافية تدعم الفأرة ولوحة المفاتيح معاً.