הצגה של כמה דרכים שימושיות ויצירתיות לעיצוב רשימה.
מה עולה בראש כשחושבים על רשימה? הדוגמה הברורה ביותר היא רשימת קניות – רשימה פשוטה ביותר, אוסף פריטים ללא סדר מסוים. אבל אנחנו משתמשים ברשימות באינטרנט בדרכים שונות. אוסף של מופעים קרובים במועדון? סביר מאוד שמדובר ברשימה. תהליך הזמנה מורכב מכמה שלבים? יכול להיות שמדובר ברשימה. גלריה של תמונות? גם זה יכול להיחשב כרשימה של תמונות עם כיתובים.
במאמר הזה נסביר על הסוגים השונים של רשימות HTML שזמינים לנו באינטרנט ועל המועדים שבהם כדאי להשתמש בהן, כולל מאפיינים מסוימים שאולי לא מוכרים לכם. בנוסף, נציג כמה דרכים שימושיות ויצירתיות לעיצוב שלהם באמצעות CSS.
מתי כדאי להשתמש ברשימה
צריך להשתמש ברכיב רשימה של HTML כשצריך לקבץ פריטים באופן סמנטי. טכנולוגיות מסייעות (כמו קוראי מסך) יידעו את המשתמש שיש רשימה ומספר הפריטים. לדוגמה, אם אתם חושבים על רשת של מוצרים באתר שופינג, המידע הזה יכול להיות מאוד שימושי. לכן, שימוש ברכיב רשימה יכול להיות בחירה טובה.
סוגי רשימות
כשמדובר בסימון, יש לנו אפשרות לבחור מבין שלושה רכיבי רשימה שונים:
- רשימה לא ממוינת
- רשימה ממוינת
- רשימת תיאורים
הבחירה תלויה בתרחיש לדוגמה.
רשימה לא ממוינת (ul)
רכיב הרשימה ללא סדר (<ul>
) שימושי במיוחד כשהפריטים ברשימה לא תואמים לסדר מסוים. כברירת מחדל, הרשימה תוצג כרשימה עם תבליטים. דוגמה לכך היא רשימת קניות, שבה הסדר לא משנה.
דוגמה נפוצה יותר באינטרנט היא תפריט ניווט. כשאתם יוצרים תפריט, מומלץ לעטוף את ul
באלמנט nav
ולזהות את התפריט באמצעות תווית, כדי לעזור לטכנולוגיות מסייעות. צריך גם לזהות את הדף הנוכחי בתפריט, ואפשר לעשות זאת באמצעות המאפיין aria-current
:
<nav aria-label="Main">
<ul>
<li>
<a href="/page-1" aria-current="page">Menu item 1</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
…
</ul>
</nav>
במאמר הזה על מבנה התפריט מפורטות כמה המלצות שיעזרו לכם להבטיח שתפריטי הניווט שלנו יהיו נגישים לכולם.
רשימה ממוינת (ol)
רכיב רשימה מסודרת (<ol>
) הוא הבחירה הטובה ביותר כשסדר הפריטים חשוב, למשל בתהליך שכולל כמה שלבים. כברירת מחדל, הפריטים ברשימה ממוספרים. דוגמה לכך יכולה להיות קבוצת הוראות, שבהן צריך להשלים את השלבים לפי הסדר.
גם רכיבי <ol>
וגם רכיבי <ul>
יכולים להכיל רק רכיבי <li>
כצאצאים הישירים שלהם.
רשימת תיאורים (dl)
רשימת תיאורים מכילה מונחים (רכיבי <dt>
) ותיאורים (<dd>
). לכל מונח יכול להיות יותר מתיאור אחד. תרחישים לדוגמה יכולים לכלול מילון מונחים או תפריט של מסעדה. רשימות של תיאורים לא מוצגות עם סמנים כברירת מחדל, אבל הדפדפנים נוטים להוסיף הפסקה לפני רכיב <dd>
.
ב-HTML מותר לקבץ מונחים עם התיאורים המצורפים שלהם באמצעות <div>
. האפשרות הזו יכולה להיות שימושית למטרות עיצוב, כפי שנראה בהמשך.
<!-- This is valid -->
<dl>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</dl>
<!-- This is also valid -->
<dl>
<div>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</div>
</dl>
עיצוב פשוט של רשימות
אחד מהשימושים הפשוטים ביותר ברשימה הוא בתוך בלוק של טקסט גוף. לרוב, אין צורך בסגנון מורכב לרשימות פשוטות כאלה, אבל יכול להיות שתרצו להתאים אישית את הסמנים של רשימה מסודרת או לא מסודרת במידה מסוימת, למשל באמצעות צבע המותג או באמצעות תמונה מותאמת אישית של הנקודות. אפשר לעשות הרבה דברים עם list-style
ועם רכיב הסימון המשנה ::marker
.
::marker
בנוסף לעיצוב בסיסי של סמלי הרשימה, אפשר ליצור סמלי נקודה מחזוריים. כאן אנחנו משתמשים בשלוש כתובות URL שונות של תמונות לערך content
של רכיב הסודיום ::marker
, כדי להוסיף לתחושה של כתיבת יד לדוגמה של רשימת הקניות (לעומת שימוש בתמונה אחת בלבד לכל התמונות):
::marker {
content: url("/marker-1.svg") ' ';
}
li:nth-child(3n)::marker {
content: url("/marker-2.svg") ' ';
}
li:nth-child(3n - 1)::marker {
content: url("/marker-3.svg") ' ';
}
מונים בהתאמה אישית
בחלק מהרשימות המסודרות, יכול להיות שנרצה להשתמש בערך המונה, אבל לצרף לו ערך נוסף. אפשר להשתמש בספירה list-item
כערך של המאפיין content
של הסמן, ולהוסיף תוכן אחר:
::marker {
content: counter(list-item) '🐈 ';
}
המונים שלנו מוסיפים אוטומטית אחד, אבל אנחנו יכולים לאפשר להם להוסיף ערך אחר אם נבחר בכך, על ידי הגדרת המאפיין counter-increment
בפריט הרשימה. לדוגמה, הפקודה הזו תגדיל את המונים שלנו בשלוש בכל פעם:
li {
counter-increment: list-item 3;
}
יש עוד הרבה דברים שאפשר להרחיב עליהם לגבי ספירה. במאמר רשימות, סמנים ומספרים ב-CSS מוסבר בהרחבה על חלק מהאפשרויות.
מגבלות על עיצוב ::marker
לפעמים אנחנו רוצים לשלוט יותר במיקום ובסגנון של הסמנים. לדוגמה, אי אפשר למקם את הסמן באמצעות flexbox או רשת, וזה יכול להיות חיסרון לפעמים אם אתם צריכים התאמה אחרת. ::marker
חושף מספר מוגבל של מאפייני CSS לקביעת סגנון. אם העיצוב שלנו דורש משהו מעבר לסגנון בסיסי, יכול להיות שעדיף להשתמש בפסאודו-אלמנט אחר.
עיצוב רשימות שלא נראות כמו רשימות
לפעמים נרצה לעצב את הרשימות שלנו בצורה שונה לגמרי מסגנון ברירת המחדל. המקרה הזה קורה לעיתים קרובות בתפריט ניווט, למשל, שבדרך כלל רוצים להסיר את כל הסמנים, ויכול להיות שיציגו את הרשימה אופקית באמצעות flexbox. מקובל להגדיר את הנכס list-style
לערך none
. המשמעות היא שלא תהיה יותר גישה לסימן באמצעות פסאודו-אלמנט ב-DOM.
סמנים מותאמים אישית באמצעות ::before
לפני הופעת ::marker
, שינוי העיצוב של רכיב הסימון ::before
היה דרך נפוצה ליצור סמנים מותאמים אישית לרשימות. אבל גם עכשיו, הוא מאפשר לנו גמישות רבה יותר, כשאנחנו זקוקים לה, לעיצוב רשימות חזותי מורכב.
בדומה למאפיין ::marker
, אפשר להוסיף סגנונות ייחודיים של סמלי נקודה באמצעות המאפיין content
. בניגוד לשימוש ב-::marker
, אנחנו צריכים לבצע מיקום ידני מסוים, כי אנחנו לא מקבלים את היתרונות האוטומטיים שמציע list-style-position
. אבל אנחנו יכולים למקם אותו בקלות יחסית באמצעות flexbox, והוא פותח מספר רב יותר של אפשרויות יישור. לדוגמה, אפשר להחליף את המיקום של הסמן:
אם אנחנו מעצבים רשימה מסודרת באמצעות הרכיב ::before
, יכול להיות שנרצה להשתמש גם בספירה לאחור כדי להוסיף את הסמנים המספריים שלנו.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
השימוש ב-::before
במקום ב-::marker
מאפשר לנו גישה מלאה למאפייני CSS לצורך עיצוב מותאם אישית, וגם מאפשר להשתמש באנימציות ובמעבריים – התמיכה בהם מוגבלת ב-::marker
.
מאפייני רשימה
אפשר להוסיף לרכיבים של רשימות מסודרות מאפיינים אופציונליים מסוימים, שיכולים לעזור לנו במגוון תרחישים לדוגמה.
רשימות הפוכות
אם יש לנו רשימה של 10 האלבומים המובילים בשנה האחרונה, יכול להיות שנרצה לספור לאחור מ-10 עד 1. אפשר להשתמש למטרה הזו בספיקות מותאמות אישית ולהגדיל אותן באופן שלילי. לחלופין, אפשר פשוט להשתמש במאפיין reversed
ב-HTML. לדעתי, באופן כללי, הגיוני יותר להשתמש במאפיין reversed
במקום להגדיל את המונה ב-CSS באופן שלילי, אלא אם המונים משמשים לצורכי הצגה בלבד. אם הטעינה של קובץ ה-CSS נכשלה, עדיין תוכלו לראות את הספרות שמספרות לאחור בצורה תקינה ב-HTML. בנוסף, צריך להביא בחשבון איך קורא מסך יפרש את הרשימה.
כדאי לצפות בהדגמה הזו של 10 האלבומים המובילים של שנת 2021. אם המספרים בספירה הזו עלו באמצעות CSS בלבד, מישהו שמשתמש בדף באמצעות קורא מסך עלול להסיק שהמספרים עלו, כך שמספר 10 היה למעשה מספר אחד.
אפשר לראות בדמו שבעזרת המאפיין reversed
, למסמנים שלנו כבר יש את הערך הנכון, בלי מאמץ נוסף מצידנו! אבל אם אנחנו יוצרים סמנים מותאמים אישית של רשימות באמצעות רכיב הסימון ::before
, אנחנו צריכים לשנות את המונים שלנו. אנחנו רק צריכים להורות למונה של פריטי הרשימה להגדיל את הערך באופן שלילי:
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
זה מספיק ב-Firefox, אבל ב-Chrome וב-Safari הסימונים ייספרו לאחור מ-0 עד -10. כדי לפתור את הבעיה, אפשר להוסיף את המאפיין start
לרשימה.
פיצול רשימות
המאפיין start
מאפשר לנו לציין את הערך המספרי שהרשימה צריכה להתחיל ממנו. אפשר להשתמש באפשרות הזו במקרים שבהם רוצים לפצל רשימה לקבוצות.
נמשיך בדוגמה של 10 האלבומים המובילים. אולי אנחנו רוצים לספור את 20 האלבומים המובילים, אבל בקבוצות של 10. בין שתי הקבוצות יש תוכן אחר של הדף.
נצטרך ליצור שתי רשימות נפרדות ב-HTML, אבל איך אפשר להבטיח שהמספרים בספירה יהיו נכונים? לפי ה-Markup הנוכחי שלנו, שתי הרשימות ייספרו לאחור מ-10 עד 1, וזה לא מה שאנחנו רוצים. עם זאת, ב-HTML שלנו אפשר לציין ערך של מאפיין start
. אם נוסיף ערך start
של 20 לרשימה הראשונה, הסימנים יעודכנו שוב באופן אוטומטי!
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
פריסת רשימה עם כמה עמודות
לפעמים, כפי שאפשר לראות מהדמואים הקודמים, פריסת כמה עמודות מתאימה היטב לרשימות שלנו. הגדרת רוחב העמודה מאפשרת לנו לוודא שהרשימה תהיה רספונסיבית באופן אוטומטי, ותתפרס על פני שתי עמודות או יותר רק כשיהיה מספיק מקום. אפשר גם להגדיר רווח בין העמודות, וכדי להוסיף עוד קצת סטייל, אפשר להוסיף קו עמודה עם סגנון (באמצעות קיצור דרך שדומה לנכס border
):
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
כשמשתמשים בעמודות, לפעמים נוצרים הפסקות לא אסתטיות בין הפריטים ברשימה – וזו לא תמיד ההשפעה הרצויה.
אנחנו יכולים למנוע את ההפסקות הכפויות האלה באמצעות break-inside: avoid
בפריטי הרשימה שלנו:
li {
break-inside: avoid;
}
מאפיינים מותאמים אישית
מאפיינים מותאמים אישית של CSS פותחים מגוון רחב של אפשרויות לעיצוב רשימות. אם אנחנו יודעים מהו האינדקס של פריט הרשימה, אנחנו יכולים להשתמש בו כדי לחשב את ערכי המאפיינים. לצערנו, בשלב זה אין דרך לקבוע את האינדקס של הרכיב (לפחות באופן שמתאים לשימוש) ב-CSS בלבד. מונים מאפשרים לנו להשתמש בערך שלהם רק בנכס content
, ולא מאפשרים לבצע חישובים.
עם זאת, אפשר להגדיר את האינדקס של הרכיב במאפיין style
ב-HTML, וכך להקל על החישובים, במיוחד אם משתמשים בשפת תבניות. בדוגמה הבאה מוסבר איך מגדירים את זה באמצעות Nunjucks:
<ol style="--length: items|length">
</ol>
Splitting.js היא ספרייה שמבצעת פונקציה דומה בצד הלקוח.
בעזרת ערך המאפיין המותאם אישית, אנחנו יכולים להציג את ההתקדמות ברשימת הפריטים בדרכים שונות. אחת מהדרכים היא להשתמש בסרגל התקדמות לרשימה של שלבים. בדוגמה הזו אנחנו משתמשים בפסאודו-אלמנט עם שיפוע לינארי כדי ליצור עמודה לכל פריט שמראה עד כמה המשתמש התקדם ברשימה.
li::before {
--stop: calc(100% / var(--length) * var(--i));
--color1: deeppink;
--color2: pink;
content: '';
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);
}
אפשר גם לשנות את הגוון תוך כדי התקדמות ברשימה, באמצעות פונקציית הצבע hsl()
. אנחנו יכולים לחשב את הערך של hue
באמצעות המאפיין המותאם אישית שלנו.
עיצוב של רשימת תיאורים
כפי שצוין קודם, אפשר לבחור לעטוף את המונחים וההגדרות שלהם ב-div
בתוך dl
, כדי לקבל יותר אפשרויות עיצוב. לדוגמה, יכול להיות שתרצו להציג את הרשימה בתצוגת רשת. הגדרת display: grid
ברשימה ללא עטיפה div
סביב כל קבוצה תגרום לכך שהמונחים והתיאורים שלנו יופיעו בתאים שונים של רשת. לפעמים זה שימושי, כמו בדוגמה הבאה, שבה מוצגת תפריט של עוגות עם התיאורים שלהן.
אנחנו יכולים להגדיר רשת ברשימה עצמה ולוודא שהמונחים והתיאורים תמיד יימצאו בעמודות, ורוחבן של העמודות יקבע לפי המונח הארוך ביותר.
לעומת זאת, אם רוצים לקבץ מונחים בצורה ברורה עם התיאורים שלהם בסגנון כרטיס, רכיב עטיפה <div>
מאוד עוזר.
משאבים
- רשימות מבוא לרשימות ול-::marker
- סמנים מותאמים אישית באמצעות ::marker
- רשימות CSS עם ספירה