بودكاست 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>
كلما أمكن ذلك.
التحقّق من استيعابك
اختبر معلوماتك عن القوائم
يسمى العنصر الذي يسبق عنصر قائمة
الأنواع الثلاثة لقوائم HTML هي
<dl>
<lo>
<ol>
<li>
<ul>
<list>
أي نمطين في هذه القائمة سيطبقان الأنماط على ::marker؟
transition
background-color
color
display