רשימות

הפודקאסט של 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>

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

עכשיו כשאתם יודעים איך להכין רשימה, אפשר לעצב אותן. מאפייני ה-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. זהו רכיב פסאודו-רכיב, כי הדפדפן יוצר אותו עבורכם ומספק ממשק API לקביעת עיצוב באופן מוגבל כדי לטרגט אותו. מידע נוסף על המבנה של תבליט CSS ל-::marker יש תמיכה מוגבלת ב-Safari.

תיבת סימון

במודל הפריסה של CSS, סמני הפריטים ברשימה מיוצגים על ידי תיבת סימון המשויכת לכל פריט ברשימה. תיבת הסימון היא המאגר שבדרך כלל מכיל את התבליט או המספר.

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

סגנונות עט סימון

לאחר שבחרת את הסמן, נבחן את מאפייני הסגנון הזמינים לבורר זה. אפשר לקרוא מידע נוסף על תבליטים מותאמים אישית באמצעות CSS ::סמן ב-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> כשאפשר.

בדיקת ההבנה

בחינת הידע שלך ברשימות

הרכיב שמופיע לפני פריט ברשימה נקרא

::תבליטים
אפשר לנסות שוב.
::עיפרון
אפשר לנסות שוב.
::סמן
נכון!
::counter
אפשר לנסות שוב.

שלושת הסוגים של רשימות HTML הם

<dl>
נכון!
<lo>
אפשר לנסות שוב.
<ol>
נכון!
<li>
אפשר לנסות שוב.
<ul>
נכון!
<list>
אפשר לנסות שוב.

אילו שני סגנונות ברשימה הזו מחילים סגנונות על סמן ::

transition
נכון!
background-color
אפשר לנסות שוב.
color
נכון!
display
אפשר לנסות שוב.

מקורות מידע