קרוסלות עם CSS

Adam Argyle

תאריך פרסום: 20 במרץ 2025

החל מגרסה 135 של Chrome, אפשר להשתמש בתכונות ממפרט CSS Overflow 5 שנועדו ליצור חוויות גלילה וחוויות של קרוסלה.

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

בסרטון מוצגת הרמוניה של לחצני גלילה, סמנים לגלילה, אנימציה מבוססת-גלילה, שאילתות מסוג scroll-state()‎, :has()‎, רשת, עוגן ועוד הרבה יותר.

עוד יותר מרשים הוא הסיפור של הנגישות.

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

צילום מסך של קרוסלה של עץ הנגישות ב-Chrome DevTools – דוגמה

Meet ::scroll-button() ו-::scroll-marker()

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

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

• לחצני גלילה
  רכיבי <button> אינטראקטיביים של גלילה עם מצב, שסופקו על ידי הדפדפן, שעוזרים לגשת לתוכן ולגלול ב-85% מאזור הגלילה כשלוחצים עליהם.

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

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

התחלה עם פס גלילה

אפשר להוסיף לחצנים וסימנים לכל אזור גלילה באתר.

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

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

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

הוספת לחצני גלילה באמצעות ::scroll-button()

בהתאם למערכת ההפעלה, יכול להיות שכבר יש לחצני גלילה סביב פסורי הגלילה. לחצנים מובנים של סרגל גלילה נוטים להזיז את אזור הגלילה, בעוד שלחצני גלילה ב-CSS מדפדפים 85% מאזור הגלילה.

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

הערה: אם רוצים שהלחצנים יזוזו רק פריט אחד בכל פעם, צריך להשתמש ב-scroll-snap-type: x mandatory בשילוב עם scroll-snap-stop: always בכל צאצא של ה-snap.

כדי להוסיף לחצני גלילה באמצעות CSS:

1. מוסיפים אותם כמו פסאודו-רכיבים אחרים, באמצעות סלקטורים: .carousel::scroll-button(right) ללחצן כדי לגלול ימינה.
2. מציינים את content עם טקסט חלופי זמין חלופי.

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

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*)::focus-visible {
    outline-offset: 5px;
  }
}

דמו

הוספת סמני גלילה באמצעות ::scroll-marker()

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

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

שימו לב שהסמנים האלה הם לא נקודות, הם משתמשים במאפיין content: "Season 1" של פסאודו-הרכיב שלהם. אפשר להשתמש גם בסמנים כתמונות ממוזערות, שמשמשות בדרך כלל בקרוסלות של גלריות באתרי מסחר אלקטרוני או באתרים שמתמקדים בתמונות.

סמנים דומים לקישורים <a> בדף, אבל יש להם כמה תכונות מיוחדות:

1. הם כוללים את המצב :target-current כשהסמן נמצא בתצוגה או מוצמד.
2. ניווט במקלדת כלול, והוא פועל כמו קבוצת יעד.
3. חוויית השימוש בקורא מסך כלולה, ואפשר להציג דוחות כמו רשימת כרטיסיות.

כדי להוסיף סמנים לנקודות עניין משמעותיות בגלילה:

1. מגדירים את המיקום של scroll-marker-group כ-before או כ-after.
2. בוחרים את נקודות העניין באמצעות בורר .carousel .point-of-interest::scroll-marker.
3. מציינים את content עם טקסט חלופי זמין לחלופין (אופציונלי): מספרים, טקסט, ריק או תמונה.

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

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}

דמו

האלמנט שמכיל את הסמנים נקרא ::scroll-marker-group והוא נוצר כרכיב אח של פס ההזזה, בדיוק כמו לחצני הגלילה. אפשר לשנות את הסגנון של הקונטיינר הזה ולהציב אותו איפה שרוצים.

סמנים וכפתורים בו-זמנית

כשמשלבים את השניים, חוויית הצפייה נראית כמו קרוסלה, אבל יש לה את היתרונות הבאים:

• התכונה פועלת גם כש-JavaScript מושבת.
• אין הידרציה או שינוי גודל מושהה (צמצום CLS).
• תמיכה בכל סוגי האנימציות והטריגרים לגלילה.
• נגישות כלולה.
• ידידותית למגע, לעכבר ולמקלדת.

עושים פחות, מגיעים ליותר אנשים מהר יותר.

דמו

משאבים

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

• תקני אינטרנט
  • CSS Overflow 5
  • סרטון הסבר על מודעות קרוסלה
  • WAI Aria Carousel
• Chrome
  • כוונת משלוח
  • גלריית קרוסלה
  • הכלי להגדרת קרוסלה

הכלי להגדרת קרוסלה

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

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

https://chrome.dev/carousel-configurator/

הוא כולל גם דוגמאות למושגים מתקדמים יותר שקשורים לקרוסלה:

• interactivity
• scroll-state
• אנימציה שמבוססת על גלילה
• והצמדה של עמודות לגלילה

גלריית קרוסלה

מרחב תצוגה שבו אפשר לראות עד כמה אפשר להשתמש בתכונות האלה, ולקבל תשובות לשאלות כמו "האם אפשר לעשות X?". כל הדגמות מבוססות על תרחישי לדוגמה שאפשר למצוא באינטרנט. בכל הדגמות מוצג איך לתזמור את הלחצנים והסמנים האלה באמצעות אנימציה שמבוססת על גלילה, שאילתות scroll-state()‎ ועוד.

עובדה מעניינת: האתר כולו לא מכיל JavaScript.

https://chrome.dev/carousel/

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

עבודה נוספת

אנחנו גאים באופן שבו התכונות האלה משתלבות עם כל HTML ו-CSS. הנגישות של קרוסלה ב-CSS היא ברמה הגבוהה ביותר. הביצועים של קרוסלה ב-CSS טובים יותר מכל פתרון ב-JavaScript. חוויית המשתמש של קרוסלה ב-CSS היא טבעית, חלקה ועשירה. עם זאת, יש דרכים לשפר את המצב.

שימוש ברכיבים משלכם

אנחנו כבר עובדים על האפשרות להוסיף רכיבים משלכם לכפתורי גלילה ולסמנים. המשמעות היא שתוכלו לספק תגי <a> משלכם עם תוכן עשיר, כמו סמלים. אפשר גם להשתמש בלחצנים משלכם עם כמה שכבות שנוצרו באמצעות Tailwind.

גלילה מחזורית

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

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

פחות עבודה, חוויות משתמש מצוינות וביצועים טובים יותר.