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

ריכזנו כאן כמה דרכים שימושיות ויצירתיות לעצב רשימה.

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 במדריך הזה תבליטים בהתאמה אישית. כדאי להמשיך לקרוא על דברים שאולי לא ידעת.

::סמן

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

המגבלות של ::עיצוב סמנים

לפעמים ייתכן שנרצה שליטה רבה יותר על המיקום והסגנון של הסמנים שלנו. לדוגמה, אי אפשר למקם את הסמן באמצעות flexbox או Grid. לדוגמה, זה יכול להיות חיסרון אם צריך לבצע יישור אחר. ::marker חושף מספר מוגבל של מאפייני CSS לצורך עיצוב. אם העיצוב שלנו דורש משהו שאינו סגנון בסיסי, ייתכן שעדיף לנו להשתמש בפסאודו-רכיב אחר.

עיצוב רשימות שלא נראות כמו רשימות

לפעמים ייתכן שנרצה לעצב את הרשימות שלנו באופן שונה לחלוטין מסגנון ברירת המחדל. בדרך כלל זה מה שקורה בתפריט ניווט, למשל, שבו אנחנו בדרך כלל רוצים להסיר את כל הסמנים, וייתכן שנציג את הרשימה שלנו לרוחב באמצעות flexbox. שיטה נפוצה היא להגדיר את המאפיין list-style כ-none. המשמעות היא שלא תהיה יותר גישה לרכיב המדומה של הסמן ב-DOM.

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

סמנים בהתאמה אישית עם ::before

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

כמו ::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 היה בעצם מספר 1.

בהדגמה אפשר לראות שעל ידי שימוש במאפיין reversed, הסמנים שלנו כבר כוללים את הערך הנכון, ללא מאמץ נוסף מצידנו. אבל אם אנחנו יוצרים סמני רשימה בהתאמה אישית באמצעות פסאודו-רכיב ::before, אנחנו צריכים להתאים את המונים שלנו. אנחנו רק צריכים להורות למונה של הפריטים ברשימה להוסיף באופן שלילי:

li::before {  
  counter-increment: list-item -1;  
  content: counter(list-item);  
}  

ניתן לעשות זאת ב-Firefox, אבל ב-Chrome וב-Safari, הסמנים ייספרו לאחור מ-0 ל-10-. כדי לתקן את הבעיה, אפשר להוסיף את המאפיין start לרשימה.

רשימות מפוצלות

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

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

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

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

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

משאבים

• רשימות מבוא לרשימות ולסימנים ::סמן
• סמנים מותאמים אישית באמצעות הסימן ::
• רשימות של שירותי CSS עם דלפקים