القوائم

تخيل أنّ لديك مجموعة من السلع التي تخطّط لشرائها خلال رحلة التسوّق القادمة. ومن الطرق الشائعة لعرض هذه المعلومات بصريًا هي القائمة، ولكن كيف يمكنك إضافة تنسيق إلى قائمة البقالة؟

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

إنشاء قائمة

بدأت القائمة السابقة بعنصر دلالي، أو <ul>، مع عناصر قائمة البقالة (عناصر <li>) كعناصر فرعية. إذا فحصت كل عنصر <li>، ستلاحظ أنّه يحتوي على display: list-item، ولهذا السبب يعرض المتصفّح ::marker تلقائيًا.

li {
  display: list-item;
}

هناك نوعان آخران من القوائم.

يمكن إنشاء قوائم بترتيب معيّن باستخدام <ol>، وفي هذه الحالة سيعرض عنصر القائمة رقمًا ك::marker.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

ويتم إنشاء قوائم الأوصاف باستخدام <dl>، ولكنّ نوع القائمة هذا لا يستخدم عنصر <li> لعنصر القائمة.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

أنماط القوائم

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

هناك ثلاث سمات لتنسيق القائمة يمكنك استخدامها لتنسيق مثالك: list-style-position وlist-style-image وlist-style-type.

list-style-position

يتيح لك list-style-position نقل النقطة النقطية إلى inside أو outside محتوى عنصر القائمة. يعني الرمز التلقائي outside عدم تضمين الرمز النقطي في محتوى عناصر القائمة، في حين أنّ الرمز inside ينقل العنصر الأول بين محتوى عنصر القائمة.

قائمة تحتوي على علامتَي ::marker للخارج والداخل، وتُظهر أنّ علامة الخارج (القيمة التلقائية) ليست في عنصر القائمة بل داخل مربّع محتوى عنصر القائمة

list-style-image

يتيح لك الرمز list-style-image استبدال النقاط النقطية في قائمتك بالصور. يتيح لك ذلك ضبط صورة مثل url أو none لجعل النقاط قائمة بصور أو svg أو gif. يمكنك أيضًا استخدام أيّ نوع وسائط أو حتى معرّف موارد منتظم (URI) للبيانات.

لنلقِ نظرة على كيفية إضافة صورة لكل سلعة من سلع البقالة كlist-style-image:

list-style-type

الخيار الأخير هو تنسيق list-style-type الذي يغيّر النقاط النقطية إلى كلمات رئيسية معروفة للنمط، وسلاسل مخصّصة، ورموز تعبيرية، وغير ذلك. يمكنك الاطّلاع على جميع أنواع أنماط القوائم المحتملة هنا.

list-style اختصار

بعد أن أصبحت لديك كل هذه السمات الفردية، يمكنك استخدام الاختصار list-style لضبط جميع أنماط القوائم في سطر واحد:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

تسمح لك سمة list-style بتحديد مجموعات من سمة واحدة أو سمتَين أو ثلاث سمات من سمات list-style بأي ترتيب. إذا تم ضبط كل من list-style-type وlist-style-image، يتم استخدام list-style-type كصورة احتياطية في حال عدم توفّر الصورة.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

هذه هي السمة الأكثر استخدامًا لأنماط القوائم التي يتم تناولها في هذا القسم. ومن التطبيقات الشائعة list-style: none لإخفاء الأنماط التلقائية. تأتي الأنماط التلقائية من المتصفّح، وغالبًا ما تظهر لك أوراق الأنماط التي تمّت إعادة ضبطها وتزيل أنماط القوائم، مثل الحشوات والسِمات. يمكنك أيضًا استخدام هذا الاختصار لضبط الأنماط، مثل list-style: square inside;.

حتى الآن، ركّزت الأمثلة على تصميم قائمة كاملة وعناصر قائمة، ولكن ماذا عن نهج أكثر دقة؟

العنصر النائب ::marker

عنصر العلامة list-item هو علامة نقطية أو واصلة أو رقم روماني يساعد في الإشارة إلى كل عنصر في قائمتك.

قائمة تحتوي على ثلاثة عناصر توضّح أنّ كل عنصر من العناصر النقطية هو عنصر وهمي من النوع ::marker

في حال فحص القائمة في أدوات مطوّري البرامج، يمكنك رؤية عنصر ::marker لكل عنصر من عناصر القائمة، على الرغم من عدم تحديد أيّ منها في HTML. إذا فحصت العنصر ::marker بشكلٍ أدق، ستظهر لك طريقة عرض المتصفّح التلقائية له.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

عند تحديد قائمة، يتم منح كل عنصر علامة، على الرغم من عدم توفّر نقطة قائمة أو رقم روماني في ملف HTML. هذا عنصر زائف لأنّ المتصفّح ينشئه نيابةً عنك، ويقدّم واجهة برمجة تطبيقات محدودة للتصميم لاستهدافه. مزيد من المعلومات حول بنية علامة CSS للنقطة تتوفّر ميزة ::marker بشكل محدود في Safari.

مربّع العلامة

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

لتصميم مربّع العلامة، يمكنك استخدام أداة الاختيار ::marker. يتيح لك ذلك اختيار العلامة فقط بدلاً من التصميم استنادًا إلى القائمة بأكملها.

أنماط محدّد الموقع

بعد اختيار العلامة، لنلقِ نظرة على سمات التصميم المتاحة لهذا العنصر المحدّد. يمكنك الاطّلاع على مزيد من المعلومات عن الرموز النقطية المخصّصة باستخدام CSS ::marker على web.dev.

هناك عدد قليل من خصائص ::marker في CSS المسموح بها:

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

نوع العرض

تعرف جميع سمات list-style و::marker كيفية تنسيق عناصر <li> لأنّها تحتوي على قيمة عرض تلقائية هي list-item. يمكنك أيضًا تحويل عناصر ليست <li> إلى عنصر قائمة.

ويمكنك إجراء ذلك من خلال إضافة السمة display: list-item. على سبيل المثال، يمكنك استخدام display: list-item إذا كنت تريد إضافة علامة نقطية معلقة على عنوان، حتى تتمكّن من تغييرها إلى علامة أخرى باستخدام ::marker. يعرض المثال التالي عنوانًا يستخدم display: list-item لأغراض التصميم، مع قائمة تستخدم ترميز القائمة الصحيح.

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

التحقّق من فهمك

اختبِر معلوماتك حول القوائم

يُسمّى العنصر الذي يسبق عنصر قائمة

::counter
::bullet
::marker
::pencil

في ما يلي الأنواع الثلاثة لقوائم HTML:

<dl>
<ol>
<ul>
<li>
<lo>
<list>

أيّ أسلوبَين في هذه القائمة سيطبّقان الأنماط على ::marker؟

background-color
display
color
transition

الموارد