The CSS Podcast - 030: Lists
تخيل أنّ لديك مجموعة من السلع التي تخطّط لشرائها خلال رحلة التسوّق القادمة. ومن الطرق الشائعة لعرض هذه المعلومات بصريًا هي القائمة، ولكن كيف يمكنك إضافة تنسيق إلى قائمة البقالة؟
<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.
هناك عدد قليل من خصائص ::marker
في CSS المسموح بها:
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
::pencil
::bullet
::counter
في ما يلي الأنواع الثلاثة لقوائم HTML:
<ul>
<lo>
<list>
<li>
<dl>
<ol>
أيّ أسلوبَين في هذه القائمة سيطبّقان الأنماط على ::marker
؟
color
background-color
display
transition