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