רשימות

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

תיבת סימון

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

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

סגנונות סמנים

אחרי שבחרתם את הסמן, נסתכל על מאפייני הסגנון שזמינים לבורר הזה. מידע נוסף על תבליטים מותאמים אישית באמצעות CSS ::Mark באתר web.dev.

יש לא מעט מאפייני ::marker של CSS שמותר להשתמש בהם:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

סוג תצוגה

כל הנכסים list-style ו-::marker שלנו יודעים לעצב את רכיבי <li> מפני שיש להם ערך תצוגה שמוגדר כברירת מחדל כפריט ברשימה. אפשר גם להפוך פריטים שאינם <li> לפריט ברשימה.

כדי לעשות זאת, צריך להוסיף את הנכס display: list-item. דוגמה אחת לשימוש ב-display: list-item היא כאשר רוצים תבליט תלוי על כותרת, כדי לשנות אותו למשהו אחר באמצעות ::marker. בדוגמה הבאה מוצגת כותרת שמשתמשת ב-display: list-item למטרות עיצוב, עם רשימה שכוללת תגי עיצוב נכונים של רשימה.

אפשר להפוך כל דבר לתצוגת פריטים ברשימה באמצעות display, אבל לא כדאי להשתמש באפשרות הזו במקום להשתמש בתגי עיצוב נכונים של רשימה, אם התוכן שאתם מעצבים הוא רשימה. שינוי המראה החזותי של פריט לפריט ברשימה לא משנה את האופן שבו שירותי הנגישות קוראים ומזהים את הפריט, ולכן הוא לא ייקרא כפריט ברשימה בקוראי מסך או יוחלף במכשיר אחר. תמיד צריך להשתמש בתגי עיצוב סמנטיים וליצור רשימות עם <li> כשאפשר.

בדיקת ההבנה

בוחנים את הידע שלכם על רשימות

משאבים

• מדריך MDN לרשימות עיצוב
• תבליטים מותאמים אישית עם CSS ::Mark
• Smashing Magazine: רשימות CSS, סמנים ומונה
• MDN באמצעות מוני CSS
• מודול CSS ורשימות CSS – רמה 3
• טריקים לשירותי CSS: ספירה באמצעות מוני CSS ורשת CSS