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