المحاسبات CSS

البيتزا

الهمبرجر

الشويات

مُعدّلات الحسابات هي "متغيرات" يتم حفظها بواسطة CSS، يمكن زيادة قيمتها عبر قواعد CSS (لتتبع استخداماتها).

تُمكّن المُعدّلات الحسابية من تعديل مظهرها بناءً على موقعها في المستند.

الترقيم التلقائي المُحسوب

مُعدّلات الحسابات في CSS تشبه "المتغيرات". يمكن زيادة قيمة المتغيرات عبر قواعد CSS (لتتبع استخداماتها).

للإستخدام مُعدّلات الحسابات في CSS، سنستخدم التخصيصات التالية:

  • counter-reset - إنشاء أو إعادة تعيين المُعدّل
  • counter-increment - زيادة قيمة المُعدّل
  • content - إدراج المحتوى المُنتج
  • counter() أو counters() الوظيفة - إضافة قيمة المُعدّل إلى العنصر

للإستخدام مُعدّلات الحسابات في CSS، يجب أولاً استخدام counter-reset أنشئه.

النموذج التالي يُنشئ مُعدّلًا حسب الصفحة (في مُحدد الجسم) و يُزيد قيمة المُعدّل لكل عنصر <h2>، ويُضيف "قسم <قيمة المُعدّل>:" في بداية كل عنصر <h2>:

النموذج

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "قسم " counter(section) ": ";
}

جربها بنفسك

المُعدّلات الحسابية المُغلفة

النموذج التالي يُنشئ مُعدّلًا حسب الصفحة (section) و مُعدّلًا حسب كل عنصر <h1> (subsection).

"section" مُعدّل الحساب يُحسب لكل عنصر <h1>، ويُكتب "قسم" و قيمة مُعدّل الحساب للقسم، "subsection" مُعدّل الحساب يُحسب لكل عنصر <h2>، ويُكتب قيمة مُعدّل الحساب للقسم و قيمة مُعدّل الحساب للsubsection:

النموذج

body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "قسم " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

جربها بنفسك

المُعدّلات الحسابية مفيدة جدًا لإنشاء قوائم مُلخّصة، لأنها تُنشئ مُعدّلًا حديثًا تلقائيًا في العناصر الفرعية. هنا، نستخدم counters() إدراج سلسلة من الأحرف بين مُعدّلات الحسابات المُغلفة في مستويات مختلفة:

النموذج

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

جربها بنفسك

خصائص معرف CSS

خصائص وصف
content استخدامها مع pseudo-elements ::before و ::after لإدراج المحتوى المولد.
counter-increment زيادة قيمة معرفات واحدة أو أكثر.
counter-reset إنشاء أو إعادة تعيين معرفة واحدة أو أكثر.