קרוסלות עם CSS

Adam Argyle

פורסם: 20 במרץ 2025

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

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

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

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

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

פגישה עם ::scroll-button() ועם ::scroll-marker()

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

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

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

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

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

התחלה עם רכיב גלילה

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

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

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

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

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

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

כדי להוסיף לחצני גלילה באמצעות 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. החוויה של קורא המסך כלולה, ודוחות כמו tablist.

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

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: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

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

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

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

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

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

משאבים

בפוסט הזה אנחנו מתייחסים לתכונות האלה בעיקר כאל 'קרוסלה', אבל היכולות והשימושיות שלהן רחבות הרבה יותר מתרחישי שימוש בקרוסלה. כדי לקבל תמונה מלאה של הפוטנציאל של התכונות החדשות האלה, כדאי לנסות את Carousel Gallery ולראות רכיבים אחרים כמו: scrollspy,‏ tabs ו-slides.

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

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

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

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

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

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

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

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

עובדה מעניינת: באתר הזה לא נעשה שימוש ב-JavaScript.

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

עבודה נוספת

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

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

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

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

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

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

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