لا تختلف القوائم 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 الخاصة بالقائمة ونريد منك أن:
- تعطي القائمة غير المرتبة تعدادًا نقطيًا.
- تعطي عناصر القائمة غير المرتبة والمرتبة ارتفاع سطر يعادل 1.5 من حجم خطها.
- تعطي عناصر القائمة المرتبة نقاط تعداد على شكل أحرف لاتينية صغيرة.
- تحاول تعديل تنسيق القوائم كما يحلو لك.
إن ارتكبت خطأً انقر على زر "reset" ليعود كل شيء كما كان، وإن أردت إظهار الحل الصحيح انقر على الزر "show solution".
الخلاصة
من السهل تنسيق القوائم إن اعتدت التعامل مع أساسياتها وخاصياتها المميزة، وسننتقل في المقال التالي إلى شرح طريقة تنسيق الروابط التشعبية.
ترجمة -وبتصرف- للمقال Styling lists.
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.