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
הוא הנקודה, הקו המחבר או המספר הרומי שעוזר לציין כל פריט ברשימה.
אם בודקים את הרשימה ב-DevTools, אפשר לראות רכיב ::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. זהו פסאודו-רכיב כי הדפדפן יוצר אותו בשבילכם, ומספק ממשק API מוגבל לעיצוב כדי לטרגט אותו. מידע נוסף על האנטומיה של דיווח על ביצועי שירותי 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
, אבל לא כדאי להשתמש בזה במקום בסימני ה-Markup הנכונים של רשימה, אם התוכן שאתם מעצבים הוא באמת רשימה. שינוי המראה החזותי של פריט לפריט ברשימה לא משנה את האופן שבו שירותי הנגישות קוראים ומזהים את הפריט, ולכן הוא לא יקרא כפריט ברשימה לקוראי מסך או למכשירי החלפת מצב. תמיד כדאי להשתמש בסימון סמנטי וליצור רשימות באמצעות <li>
כשהדבר אפשרי.
בדיקת ההבנה
בדיקת הידע שלכם בנושא רשימות
הרכיב שקודם ל-list-item נקרא
::marker
::counter
::bullet
::pencil
שלושת הסוגים של רשימות HTML הם
<ul>
<list>
<ol>
<lo>
<li>
<dl>
אילו שני סגנונות ברשימה הזו יחולו סגנונות על ::marker
?
background-color
transition
display
color