القوائم

بودكاست CSS - 030: القوائم

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

<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>

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

دعم المتصفح

  • 1
  • 12
  • 1
  • 1

المصدر

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

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

list-style-position

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

قائمة بالخارج والداخل ::marker والتي توضح أن out (القيمة الافتراضية) ليست في عنصر القائمة وداخلها في مربع محتوى عنصر القائمة.

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 pseudo-elements.

عند فحص القائمة في "أدوات مطوري البرامج"، سيظهر لك العنصر ::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.

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

  • 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> كلما أمكن ذلك.

التحقّق من استيعابك

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

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

::رمز نقطي
يُرجى إعادة المحاولة.
::قلم رصاص
يُرجى إعادة المحاولة.
::marker
إجابة صحيحة
::counter
يُرجى إعادة المحاولة.

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

<dl>
إجابة صحيحة
<lo>
يُرجى إعادة المحاولة.
<ol>
إجابة صحيحة
<li>
يُرجى إعادة المحاولة.
<ul>
إجابة صحيحة
<list>
يُرجى إعادة المحاولة.

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

transition
إجابة صحيحة
background-color
يُرجى إعادة المحاولة.
color
إجابة صحيحة
display
يُرجى إعادة المحاولة.

المراجِع