עיצוב רשימת הקריאייטיב

הצגה של כמה דרכים שימושיות ויצירתיות לעיצוב רשימה.

Michelle Barker

מה עולה בראש כשחושבים על רשימה? הדוגמה הברורה ביותר היא רשימת קניות – רשימת הפריטים הפשוטה ביותר, אוסף של פריטים ללא סדר מסוים. אבל אנחנו משתמשים ברשימות באינטרנט בדרכים שונות. אוסף של מופעים קרובים במועדון? סביר מאוד שמדובר ברשימה. תהליך הזמנה מורכב מכמה שלבים? יכול להיות שמדובר ברשימה. גלריה של תמונות? גם זה יכול להיחשב כרשימה של תמונות עם כיתובים.

במאמר הזה נסביר על סוגי הרשימות השונים ב-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.

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

זהירות: חשוב לדעת: list-style: none יגרום ל-Safari להפסיק לזהות רשימה לא ממוינת בעץ הנגישות. כלומר, קורא המסך לא יכריז יותר על מידע שימושי כמו מספר הפריטים. תיקון פשוט (בהנחה שהרשימה צריכה להיקרא כך) הוא להשתמש ברכיב role="list" ברכיב <ul> או <ol> ב-HTML, בהתאם להמלצה של מומחה הנגישות סקוט או'הארה.

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

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

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

משאבים

• רשימות מבוא לרשימות ול-::marker
• סמנים מותאמים אישית באמצעות ::marker
• רשימות CSS עם ספירה