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