في هذا الدرس 6تصفّح المواضيع
كتابة الأرقام يدوياً داخل العناوين مثل كتابة Section 1 ثم Section 2 في ملف HTML تتحول إلى عبء مرهق فور إدراج قسم جديد في المنتصف أو إعادة ترتيب الفقرات. وهنا تبرز العدادات التلقائية في CSS بوصفها متغيرات رقمية صحيحة يديرها محرك الأنماط مباشرة، فتزيد تلقائياً بحسب تسلسل ظهور العناصر في المستند.
تعمل أي دورة ترقيم بثلاث خطوات مترابطة: تهيئة عداد مسمى على الحاوية الأب عبر counter-reset، ثم زيادة قيمته عند كل عنصر مستهدف عبر counter-increment، وأخيراً إخراج الرقم منسقاً داخل ::before أو ::after باستخدام دالة counter() أو counters().
تنشئ خاصية counter-reset نطاق عداد جديد على العنصر وتضبط قيمته الابتدائية على الصفر 0 افتراضياً عند عدم تحديد رقم. فعلى سبيل المثال تبدأ القاعدة counter-reset: section من الصفر، بينما تبدأ القاعدة counter-reset: section 4 من الرقم 4 ليحمل أول عنوان تالٍ الرقم 5.
ويمكنك كذلك تهيئة عدة عدادات مستقلة في تصريح واحد تفصل بينها مسافات دون فواصل مثل counter-reset: chapter 0 figure 0 على الحاوية نفسها.
كلما صادف المتصفح عنصراً يطابق counter-increment: section فإنه يضيف 1 افتراضياً إلى أقرب نطاق نشط للعداد section. ويمكنك تمرير أي خطوة موجبة أو سالبة؛ فالقيمة counter-increment: score 10 تعد بالعشرات، بينما يتيح الجمع بين counter-reset: countdown 4 على الأب وcounter-increment: countdown -1 على الأبناء بناء عد تنازلي أنيق 3, 2, 1.
انتبه كذلك لتأثير حالات الإخفاء: فالعنصر المخفي عبر display: none لا ينشئ صندوقاً في التخطيط ولذلك لا يهيئ العداد ولا يزيده، بينما يظل العنصر ذو visibility: hidden حاضراً في التخطيط فيزيد العداد كالمعتاد.
.guide { counter-reset: sec; }
.guide-h2 { counter-increment: sec; counter-reset: sub; }
.guide-h2::before { content: counter(sec) ". "; }
.guide-h3 { counter-increment: sub; }
.guide-h3::before {
content: counter(sec) "." counter(sub) " ";
}تُخرج دالة counter() القيمة الحالية للعداد كنص داخل خاصية content. وتستخدم الدالة الأرقام القياسية decimal افتراضياً، لكن يمكنك تمرير معامل ثانٍ اختياري لتحديد نمط الترقيم مثل counter(step, decimal-leading-zero) لإظهار صفر بادئ 01, 02, 03، أو counter(part, upper-roman) للأرقام اللاتينية، أو counter(opt, upper-alpha) للحروف الأبجدية الكبيرة A, B, C.
ويمكن دمج كلمات ثابتة قبل الدالة أو بعدها في السطر نفسه مثل content: "Step " counter(step, decimal-leading-zero) " - " لإنتاج تسميات أنيقة ومتسقة.
مختبر العدادات التلقائية التفاعلي
عند بناء فهارس الكتب أو العقود القانونية أو الوثائق التقنية المتفرعة إلى عدة مستويات، يصبح ابتكار اسم عداد منفصل لكل مستوى أمراً مرهقاً وغير مرن. ولهذا توفر اللغة دالة الجمع counters()؛ فعندما تعيد كل قائمة متداخلة <ol> تهيئة العداد بالاسم نفسه counter-reset: item ينشئ المتصفح نسخة فرعية متداخلة دون مسح قيمة المستوى الأعلى.
وعند استدعاء counters(item, ".") تجمع الدالة جميع القيم النشطة للعداد من المستوى الخارجي حتى الداخلي مفصولة بالنقطة، فتنتج تلقائياً 1 ثم 1.1 ثم 1.2.1 مهما بلغ عمق التداخل.
.toc {
list-style: none;
counter-reset: item;
}
.toc-entry { counter-increment: item; }
.toc-entry::before {
content: counters(item, ".") " ";
font-weight: 700;
}من أبرز التطبيقات العملية للعدادات في واجهات الويب تصميم شريط خطوات التسجيل أو إتمام الطلب. فعند دمج تخطيط الصندوق المرن على قائمة مرتبة مع 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 لبناء قوائم تنقل احترافية تدعم الفأرة ولوحة المفاتيح معاً.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Counter Scope Initialization تهيئة نطاق العداد
- إنشاء عداد رقمي مسمى على العنصر الأب عبر خاصية counter-reset بقيمة ابتدائية تساوي الصفر افتراضياً.
- للمراجعة
- 02 Counter Step Advancement خطوة زيادة العداد
- إضافة عدد صحيح موجب أو سالب إلى العداد النشط في كل مرة يطابق فيها المحدد عنصراً مستهدفاً.
- للمراجعة
- 03 Hierarchical Counter Joining دمج الترقيم المتداخل
- ربط جميع النسخ المتداخلة النشطة لعداد يحمل الاسم نفسه باستخدام دالة الجمع counters مع فاصل نصي كالنقطة.
- للمراجعة
- 04 Decimal Leading Zero نمط الصفر البادئ
- نمط تنسيق رقمي يمرر لدالة العداد ليضيف صفراً على يسار الأرقام المفردة فتظهر بصورة 01 حتى 09.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 TOC TOC
- Table of Contents
- فهرس محتويات متعدد المستويات يُرقم تلقائياً عبر القوائم المتداخلة ودالة counters في أوراق الأنماط.
- للمراجعة
- 02 RTL RTL
- Right-to-Left
- اتجاه التخطيط من اليمين إلى اليسار في الواجهات العربية حيث تنعكس أشرطة الخطوات المرقمة تلقائياً.
- للمراجعة
- 03 UI UI
- User Interface
- عناصر واجهة المستخدم مثل أشرطة مراحل التسجيل التي تحافظ على تسلسل أرقامها تلقائياً عبر العدادات.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
هيئ عداد sec على المقالة وزده مع تصفير sub عند كل h2 ثم اعرض ترقيماً بصيغة 1.1 أمام العناوين الفرعية h3::before.
-
نسق قوائم ol متداخلة بخاصية counter-reset: item واستخدم دالة الجمع counters بفاصل نقطي لإظهار ترقيم 1.2.1 تلقائياً.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.