تنسيق القوائم في CSS

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

ننصحك قبل إكمال قراءة المقال أن تطلع على أساسيات لغة HTML ومقال التنسيقات الأساسية للنصوص وخطوط الكتابة في CSS.

مثال عن قائمة بسيطة

حتى نبدأ العمل سنعرض مثالًا عن قائمة بسيطة، وخلال تقدم المقال سنلقي نظرةً على القوائم المرتبة وغير المرتبة وقوائم الوصف التي تتمتع بميزات تنسيقية متشابهة إضافةً إلى ميزات مخصصة لكل منها. يمكنك الوصول إلى المثال بشكله الأصلي غير المنسّق عبر غيت هب GitHub والحصول على الشيفرة المصدرية.

<h2>Shopping (unordered) list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<ul>
  <li>Hummus</li>
  <li>Pita</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h2>Recipe (ordered) list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<ol>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

<h2>Ingredient description list</h2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>

<dl>
  <dt>Hummus</dt>
  <dd>
    A thick dip/sauce generally made from chick peas blended with tahini, lemon
    juice, salt, garlic, and other ingredients.
  </dd>
  <dt>Pita</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>
    A semi-hard, unripened, brined cheese with a higher-than-usual melting
    point, usually made from goat/sheep milk.
  </dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>

إذا عرضت الشيفرة ضمن متصفح، ثم تصفّحت قائمة العناصر باستخدام أدوات مطوري ويب ستلاحظ بعض التنسيقات الافتراضية المطبّقة:

للقائمة غير المرتبة <ul> والمرتبة <ol> هوامش علوية وسفلية بحجم 16px (أو 1em)، وحاشية يسارية padding-left بحجم 40px (أو 2.5em). في حال ضُبطت الخاصية dir من اليمين إلى اليسار right-to-left أو rtl للعناصر ul و ol، سيظهر تأثير الحاشية اليمنية padding-right والتي لها القيمة الافتراضية 40px (أو 2.5em).
لا تملك عناصر القائمة <li> مجموعة تنسيقات افتراضية.
للعنصر <dl> هوامش علوية وسفلية بحجم 16px (أو 1em) لكن دون حواشي.
للعنصر <dd> هامش يساري margin-left حجمه 40px (أو 2.5em).
للعنصر <p> الذي أضفناه على سبيل الموازنة هوامش علوية وسفلية بحجم 16px كما هو حال الأنواع المختلفة للقوائم.

التعامل مع التباعد في القوائم

لا بد من ضبط تنسيق القوائم بطريقة تحافظ على نفس التباعد مع العناصر المحيطة بها مثل الفقرات والصور، وهو ما يُعرف بالتناسق العمودي vertical rhythm، وتحافظ على نفس التباعد الأفقي مع بعضها. يمكنك الاطلاع على المثال الجاهز على غيت هب وتنزيل الشيفرة المصدرية.

إليك شيفرة CSS المستخدمة في تنسيق النص وتنسيق التباعد:

/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/* Description list styles */

dd,
dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

تعرِّف القاعدة الأولى خط كتابة لكامل الموقع حجمه الأساسي 10px، وترث هذه القاعدة جميع عناصر الصفحة.
تعرّف القاعدتين الثانية والثالثة حجم خط نسبي (مقاس بواحدة em) مخصص للعناوين <h> ولأنواع القوائم المختلفة (يرثها أبناء عناصر القائمة) والفقرات. أي سيكون لكل قائمة وفقرة حجم الخط نفسه ونفس التباعد من الأعلى والأسفل مما يحافظ على التناسق العمودي.
تخصص القاعدة الرابعة نفس ارتفاع السطر line-height في الفقرات وعناصر القوائم أي سيكون التباعد نفسه بين أسطر الفقرات وعناصر القوائم، ويساعد ذلك في الحفاظ على التناسق العمودي.
تُطبَّق القاعدتان الخامسة والسادسة على قوائم الوصف وتعطي نفس ارتفاع السطر بين عناصر القائمة والوصف كما هو الحال بين عناصر القوائم السابقة والفقرات. كما جعلنا الخط سميكًا في الوصف ليتميز عن عناصر القائمة.

خاصيات التنسيق المخصصة للقوائم

بعد أن ألقينا نظرة على التقنيات المتبعة في تحديد التباعد في القوائم، ننتقل إلى استكشاف بعض الخاصيات التي خصصت لتنسيق القوائم. هناك ثلاث خاصيات لا بد من الاطلاع عليها بدايةً ويمكن أن تُطبّق على القوائم المرتبة <ol> أو غير المرتبة <ul>:

list-style-type: تضبط نوع النقاط المستخدمة في القائمة كأن تكون دائرية أو مربعة مثلًا في القوائم غير المرتبة، أو أن تكون أرقامًا أو أحرفًا في القوائم المرتبة.
list-style-position: تضبط موضع النقاط في عناصر القائمة إن كانت ستظهر داخل القائمة أو خارجها.
list-style-image: تسمح باستخدام صورة مخصصة في قوائم التعداد النقطي بدلًا من المربع أو الدائرة النمطية.

تنسيق قوائم التعداد النقطي

تُستخدم الخاصية list-style-type كما أشرنا سابقًا لضبط نمط النقاط المستخدمة في القوائم النقطية. وفي مثالنا، سنضبط القائمة المرتبة لتعرض ترقيمًا رومانيًا بأحرف كبيرة:

ol {
  list-style-type: upper-roman;
}

ستكون النتيجة على النحو التالي:

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

موضع النقاط

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

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

ستكون النتيجة مشابهة للشكل التالي:

استخدام صور مخصصة للنقاط

تسمح الخاصية list-style-image باستخدام صور مخصصة لنقاط القائمة، وبطريقة بسيطة جدًا:

ul {
  list-style-image: url(star.svg);
}

لكن هناك محدودية في استخدام هذه الخاصية من ناحية التحكم بموقع النقاط وحجمها وغيرها، لهذا ننصحك باستخدام مجموعة الخاصيات المتعلقة بالخلفية background والتي تعرفنا عليها في مقال سابق، وإليك كيفية استخدامها:

ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

ما فعلناه في الشيفرة السابقة هو كالتالي:

ضبطنا قيمة الحاشية اليسارية padding-left للعنصر <ul> على 20px بدلًا من القيمة الافتراضية 40px، وطبقنا نفس الحاشية على عناصر القائمة غير المرتبة كي تبقى بمحاذاة عناصر القائمة المرتبة وقائمة الوصف على الرغم من وجود حاشية لصور الخلفية ضمن كل عنصر، ولو لم نفعل ذلك، ستتداخل صور الخلفية مع نص العنصر ويبدو الأمر فوضويًا.
ضبطنا الخاصية list-style-type على القيمة none كي لا تظهر النقاط بشكلها الافتراضي لأننا سنستخدم خاصيات الخلفية background للتعامل معها.
وضعنا نقطة مخصصة قبل كل عنصر في القائمة غير المرتبة، وإليك الخاصيات التي استخدمناها لتخصيص هذه النقطة:
- background-image: تعطي مرجعًا إلى مسار ملف الصورة التي نستخدمها بصفتها نقطة.
- background-position: تضبط مكان ظهور الخلفية ضمن العنصر وقد جعلناها في حالتنا 0 0 مما يعني أن النقطة ستظهر أعلى يسار العنصر.
- background-size: تضبط حجم صورة الخلفية، ومن الناحية العملية لا بد أن يكون حجم صورة الخلفية بحجم عنصر القائمة (أو أكبر أو أصغر بشيء بسيط)؛ وطالما أننا نستخدم الحجم 1.6rem (أو 16px) والذي يتناسب تمامًا مع حجم حاشية مقدارها 20px يمكن أن نضع النقاط ضمن عنصر القائمة دون مشاكل، سيجعل مجموع 16 بكسل مع 4 بكسل من الفراغ الذي يحيط بالنقطة الأمر مناسبًا.
- background-repeat: تتكرر الصورة افتراضيًا حتى يمتلئ الفراغ المتاح لها، وطالما أننا نحتاج إلى نسخة واحدة من الصورة التي تمثل النقطة، ضبطنا قيمة الخاصية على no-repeat.

ستكون نتائج عملنا كما في الصورة التالية:

الخاصة المختصرة list-style

يمكنك ضبط الخاصيات الثلاث السابقة باستخدام الخاصية المختصرة list-style، إذ تستطيع مثلًا أن تستبدل الشيفرة التالية:

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}

بالشيفرة المختصرة التالية:

ul {
  list-style: square url(example.png) inside;
}

يمكن أن ترتب القيم الثلاث بأية طريقة، كما يمكنك استخدام إحداها أو اثنتين منها أو ثلاثتها. توضع القيم الافتراضية التالية: disc و none و outside في حال لم تُحدد قيمتها صراحة. إذا استُخدمت الخاصية type مع الخاصية image، سيُستخدم النوع type إن لم ينجح تحميل الصورة المحددة.

التحكم بطريقة ترقيم القوائم

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

الخاصية start

تتيح لك الخاصية start الخاصة بعنصر القائمة المرتبة <ol> أن تحدد الرقم الذي تبدأ منه التعداد. إليك مثالًا:

<ol start="4">
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

ستكون النتيجة على النحو التالي:

الخاصية reversed

تجعل الخاصية reversed التعداد عكسيًا ابتداءً من قيمة محددة. إليك مثالًا:

<ol start="4" reversed>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

ستكون النتيجة على النحو التالي:

ملاحظة: إن كان عدد عناصر القائمة أكبر من القيمة التي تحددها الخاصية start عند استخدام التعداد العكسي، فسيستمر التعداد نحو الصفر ومنه إلى القيم السالبة.

الخاصية value

تسمح لك الخاصيةvalue بتخصيص رقم لكل عنصر من عناصر القائمة. إليك مثالًا:

<ol>
  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
  <li value="4">
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

ستكون النتيجة على النحو التالي:

ملاحظة: حتى لو استخدمت تعدادًا ليس رقميًا للخاصية list-style-type، ستحتاج إلى استخدام القيم الرقمية المكافئة ضمن الخاصية value.

تطبيق عملي

نطلب منك في هذا التطبيق العملي الاستفادة من الأفكار التي طرحناها في المقال لتنسيق قائمة متداخلة. ستجد ضمن المحرر التفاعلي التالي شيفرة HTML الخاصة بالقائمة ونريد منك أن: