القوائم

بودكاست 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>

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

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

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

list-style-position

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

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 لكل عنصر من عناصر القائمة، على الرغم من عدم الإعلان عن أي عنصر في 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> متى أمكن ذلك.

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

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

الموارد

• دليل MDN حول قوائم الأنماط
• التعداد النقطي المخصص باستخدام CSS ::marker
• Smashing Magazine: قوائم CSS والعلامات والعدادات
• MDN باستخدام عدّادات CSS
• المستوى 3 من وحدة قوائم CSS وعدّادات CSS
• CSS-Tricks: Counting باستخدام عدّادات CSS وشبكة CSS