نمط قائمة تصميمات الإعلانات

نظرة على بعض الطرق المفيدة والمبتكرة لتصميم قائمة.

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

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

متى يمكن استخدام قائمة

يجب استخدام عنصر قائمة HTML عندما يلزم تجميع العناصر دلاليًا. ستُعلم التكنولوجيا المساعِدة (مثل برامج قراءة الشاشة) المستخدم بوجود قائمة، وعدد العناصر. إذا فكرت في شبكة منتجات على موقع تسوق مثلاً، فإن معرفة هذه المعلومات ستكون مفيدة للغاية. لذلك، قد يكون استخدام عنصر القائمة اختيارًا جيدًا.

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

في ما يتعلّق بالترميز، يتوفّر لنا ثلاثة عناصر مختلفة للقائمة:

• قائمة بدون ترتيب
• قائمة مع ترتيب
• قائمة الأوصاف

ويعتمد الخيار الذي تحدّده على حالة الاستخدام.

قائمة بدون ترتيب (ul)

يكون عنصر القائمة غير المرتَّب (<ul>) مفيدًا للغاية عندما لا تتطابق العناصر في القائمة مع أي ترتيب معيّن. وسيتم عرض ذلك تلقائيًا كقائمة نقطية. مثال على قائمة التسوق، حيث لا يهم الطلب.

هناك مثال أكثر شيوعًا على الويب وهو قائمة التنقل. عند إنشاء قائمة، من الأفضل لفّ ul بعنصر nav ولتحديد القائمة باستخدام تصنيف، وذلك لمساعدة التكنولوجيات المساعِدة. علينا أيضًا تحديد الصفحة الحالية في القائمة، وهو ما يمكننا تنفيذه باستخدام السمة aria-current:

<nav aria-label="Main">  
  <ul>  
    <li>  
      <a href="/page-1" aria-current="page">Menu item 1</a>  
    </li>  
    <li>  
      <a href="/page-2">Menu item 2</a>  
    </li>  
    <li>  
      <a href="/page-2">Menu item 2</a>  
    </li>  
      …  
    </ul>  
</nav>  

توضّح هذه المقالة حول بنية القائمة عددًا من الاقتراحات لضمان وصول الجميع إلى قوائم التنقّل.

قائمة مع ترتيب (ol)

يكون عنصر القائمة المرتَّب (<ol>) هو الخيار الأفضل عندما يكون ترتيب العناصر مهمًا، مثل العملية المتعدّدة الخطوات. بشكل افتراضي، تكون عناصر القائمة مرقمة. من الأمثلة على ذلك مجموعة من التعليمات، حيث يجب إكمال الخطوات بالترتيب.

لا يمكن أن يحتوي العنصران <ol> و<ul> إلا على عناصر <li> كعناصر ثانوية مباشرة له.

قائمة الأوصاف (dl)

تحتوي قائمة الوصف على عبارات (عناصر <dt>) وأوصاف (<dd>)، ويمكن أن يقترن كل مصطلح بأكثر من وصف واحد. قد تتضمن حالات الاستخدام المحتملة مسردًا للمصطلحات أو ربما قائمة طعام مطعم. لا يتم عرض قوائم الوصف مع أي علامات بشكل تلقائي، ولكن تميل المتصفحات إلى وضع مسافة بادئة للعنصر <dd>.

في HTML، يُسمح بتجميع العبارات مع الأوصاف المصاحبة لها باستخدام <div>. ويمكن أن يكون ذلك مفيدًا لأغراض التنسيق، كما سنرى لاحقًا.

<!-- This is valid --> 
<dl>  
    <dt>Term 1</dt>  
    <dd>This is the first description of the first term in the list</dd>  
    <dd>This is the second description of the first term in the list</dd>  
    <dt>Term 2</dt>  
    <dd>This is the description of the second term in the list</dd>  
</dl>

<!-- This is also valid --> 
<dl>  
    <div>  
        <dt>Term 1</dt>  
        <dd>This is the first description of the first term in the list</dd>  
        <dd>This is the second description of the first term in the list</dd>  
    </div>  
    <div>  
        <dt>Term 2</dt>  
        <dd>This is the description of the second term in the list</dd>  
    </div>  
</dl>  

تصميم قائمة بسيط

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

::marker

بالإضافة إلى إعطاء علامات القائمة بعض الأنماط الأساسية، يمكننا إنشاء رموز نقطية دورية. نستخدم في ما يلي ثلاثة عناوين URL مختلفة للصور للقيمة content للعنصر الزائف من ::marker، ما يزيد من الشكل المكتوب بخط اليد في مثال قائمة التسوّق (بدلاً من استخدام صورة واحدة فقط للجميع):

::marker {  
    content: url("/marker-1.svg") ' ';  
}

li:nth-child(3n)::marker {  
    content: url("/marker-2.svg") ' ';  
}

li:nth-child(3n - 1)::marker {  
    content: url("/marker-3.svg") ' ';  
}  

العدّادات المخصّصة

بالنسبة إلى بعض القوائم المرتبة، قد نرغب في استخدام القيمة المضادة، مع إلحاق قيمة أخرى بها. يمكننا استخدام العدّاد list-item كقيمة للسمة content الخاصة بالعلامة التجارية وإلحاق أي محتوى آخر بها:

::marker {  
    content: counter(list-item) '🐈 ';  
}  

تتم زيادة عدد العدّادات تلقائيًا بمقدار واحد، ولكن يمكننا السماح لها بالزيادة بقيمة مختلفة إذا اخترنا ذلك، وذلك من خلال ضبط السمة counter-increment على عنصر القائمة. على سبيل المثال، سيؤدي هذا إلى زيادة العدّادات بمقدار ثلاثة أعداد في كل مرة:

li {  
    counter-increment: list-item 3;  
}  

هناك المزيد الذي يمكننا التعمق فيه باستخدام العدادات. تشرح مقالة قوائم CSS والعلامات والعدّادات بعض الاحتمالات بمزيد من التفصيل.

حدود نمط ::marker

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

تصميم القوائم التي لا تبدو كقوائم

في بعض الأحيان قد نرغب في تصميم قوائمنا بطريقة مختلفة تمامًا عن النمط الافتراضي. غالبًا ما يحدث ذلك مع قائمة التنقّل، على سبيل المثال، حيث نريد عادةً إزالة جميع العلامات وقد نعرض قائمتنا أفقيًا باستخدام flexbox. من الممارسات الشائعة ضبط السمة list-style على none. يعني هذا أنّه لن يكون بالإمكان الوصول إلى العنصر الزائف للعلامة في نموذج العناصر في المستند (DOM).

علامات مخصّصة تحتوي على ::before

كان تصميم العنصر الزائف ::before طريقة شائعة لإنشاء علامات قائمة مخصّصة قبل ظهور ::marker. ولكن حتى الآن، يمكن أن يتيح لنا المزيد من المرونة، عندما نحتاج إليها، لإنشاء نمط قائمة معقد بصريًا.

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

إذا صمّمنا قائمة مرتّبة باستخدام العنصر ::before، قد نرغب أيضًا في استخدام العدادات لإضافة علاماتنا الرقمية.

li::before {  
  counter-increment: list-item;  
  content: counter(list-item);  
}  

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

إدراج السمات

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

القوائم التي تم عكسها

إذا كانت لدينا قائمة بأفضل 10 ألبومات في العام الماضي، فقد نحتاج إلى العد التنازلي من 10 إلى 1. يمكننا استخدام العدّادات المخصّصة لذلك، ونزيدها بصورة سلبية. أو يمكننا ببساطة استخدام سمة reversed في HTML. أعتقد أنّه من المنطقي بشكل عام استخدام سمة reversed بدلاً من زيادة العدّاد في CSS بشكل سلبي، إلا إذا كانت هذه المقاييس عرضية فقط. وإذا تعذّر تحميل CSS، سيظل بإمكانك رؤية الأرقام يتم العد التنازلي بشكل صحيح في ملف HTML. بالإضافة إلى ذلك، نحن بحاجة إلى التفكير في كيفية تفسير قارئ الشاشة للقائمة.

شاهِد هذا العرض التوضيحي لأفضل 10 ألبومات من العام 2021. إذا تمت زيادة العدّادات باستخدام CSS فقط، قد يستنتج أي شخص يصل إلى الصفحة باستخدام قارئ الشاشة أنّ الأرقام قد تم احتسابها أعلى، وبالتالي هذا الرقم 10 هو الرقم الأول.

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

li::before {  
  counter-increment: list-item -1;  
  content: counter(list-item);  
}  

سيكون هذا كافيًا في Firefox، لكن في Chrome وSafari سيتم العدّ التنازلي للعلامات من صفر إلى -10. يمكننا حلّ هذه المشكلة من خلال إضافة السمة start إلى القائمة.

تقسيم القوائم

تتيح لنا السمة start تحديد القيمة الرقمية التي يجب أن تبدأ منها القائمة. إحدى الطرق المفيدة لذلك هي الحالات التي تريد فيها تقسيم قائمة إلى مجموعات.

فلنعتمد على أفضل 10 ألبومات لدينا. ربما نرغب فعلاً في العد التنازلي لأهم 20 ألبومًا، ولكن في مجموعات من 10 ألبومات. ويتوفّر محتوى صفحة آخر بين المجموعتَين.

سنحتاج إلى إنشاء قائمتين منفصلتين في ملف HTML الخاص بنا، ولكن كيف يمكننا التأكد من صحة العدادات؟ وفقًا للترميز الحالي، سيتم العدّ التنازلي في كلتا القائمتين من 10 إلى 1، وهذا ليس ما نريده. ومع ذلك، يمكننا تحديد قيمة السمة start في ترميز HTML. إذا أضفنا القيمة start البالغة 20 إلى القائمة الأولى، سيتم تعديل العلامات تلقائيًا مرة أخرى.

<ol reversed start="20">  
  <li>...</li>  
  <li>...</li>  
  <li>...</li>  
</ol>  

تخطيط قائمة متعددة الأعمدة

يمكن أن يكون التخطيط متعدد الأعمدة مناسبًا أحيانًا لقوائمنا، كما ترون من العروض التوضيحية السابقة. من خلال تعيين عرض عمود، يمكننا التأكد من أن قائمتنا تستجيب تلقائيًا، ووضع نفسها فوق عمودين أو أكثر فقط عند وجود مساحة كافية. يمكننا أيضًا تحديد فجوة بين الأعمدة، ولتحقيق مزيد من الازدهار، أضِف قاعدة عمود نمطية (باستخدام اختصار يشبه السمة border):

ol {  
    columns: 25rem;  
    column-gap: 7rem;  
    column-rule: 4px dotted turquoise;  
}  

باستخدام الأعمدة، يمكن أن ينتهي بنا الأمر في بعض الأحيان وفواصل غير واضحة في عناصر القائمة - وليس دائمًا التأثير الذي نريده.

يمكننا منع عرض هذه الفواصل التي يتم فرض عرضها باستخدام break-inside: avoid في عناصر القائمة:

li {  
    break-inside: avoid;  
}  

الخصائص المخصّصة

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

ويمكننا ضبط فهرس العنصر ضمن السمة style في HTML، ما قد يجعل العمليات الحسابية أكثر عملية، خصوصًا إذا كنا نستخدم لغة نموذجية. يوضح هذا المثال كيفية ضبط ذلك باستخدام Nunjucks:

<ol style="--length: items|length">  
  
</ol>  

Splitting.js عبارة عن مكتبة تنفّذ وظيفة مشابهة من جهة العميل.

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

li::before {  
    --stop: calc(100% / var(--length) * var(--i));  
    --color1: deeppink;  
    --color2: pink;  

    content: '';  
    background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);  
}  

يمكننا أيضًا ضبط تدرج اللون مع تقدم القائمة، باستخدام دالة اللون hsl(). يمكننا حساب قيمة hue باستخدام خاصتنا المخصّصة.

تصميم قائمة الوصف

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

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

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

المراجِع

• القوائم مقدمة عن القوائم و ::marker
• العلامات المخصّصة باستخدام علامة ::marker
• قوائم CSS التي تحتوي على عدّادات