רשימות

נניח שיש לכם כמה פריטים שאתם מתכננים לקנות בביקור הבא בסופרמרקט. אחת מהדרכים הנפוצות לייצוג חזותי של הנתונים היא רשימה – אבל איך אפשר להוסיף עיצוב לרשימת המצרכים?

<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>

סגנונות רשימה

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

עכשיו, אחרי שלמדתם איך ליצור רשימה, אתם יכולים לעצב אותה. מאפייני ה-CSS הראשונים שיזוהו הם אלה שחלים על הרשימה כולה.

יש שלושה מאפייני סגנון של רשימות שאפשר להשתמש בהם כדי לעצב את הדוגמה: list-style-position,‏ list-style-image ו-list-style-type.

list-style-position

list-style-position מאפשרת להעביר את תבליט הנקודה לinside או לoutside של תוכן הפריט ברשימה. outside כברירת מחדל, המשמעות היא שסימן הפסיק לא נכלל בתוכן של הפריטים ברשימה, ואילו inside מעביר את הרכיב הראשון לתוכן של פריט הרשימה.

רשימה עם ::marker גם מחוץ לקו וגם בתוך הקו, שמראה שהקו מחוץ לקו (ערך ברירת המחדל) לא נמצא בפריט הרשימה אלא בתוך תיבת התוכן של פריט הרשימה.

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.

אם בודקים את הרשימה ב-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

משאבים