יצירת רכיב של סטוריז

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

Adam Argyle

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

הדגמה

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

אם אתם מעדיפים לצפות בסרטון, הנה גרסת YouTube של הפוסט הזה:

סקירה כללית

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

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

בחירת הכלים המתאימים למשימה

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

CSS Grid

הפריסה שלנו לא הייתה מסובכת מדי ל-CSS Grid, כי יש לה כמה דרכים יעילות לניהול תוכן.

פריסת חברים

העוטף הראשי של רכיב .stories הוא תצוגת גלילה אופקית שמותאמת לניידים:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
שימוש במצב מכשיר בכלי הפיתוח ל-Chrome כדי להדגיש את העמודות שנוצרו על ידי Grid

נפרט את הפריסה grid:

  • אנחנו ממלאים במפורש את אזור התצוגה בנייד באמצעות 100vh ו-100vw ומגבילים את הגודל במחשב
  • ‫/ מפריד בין תבניות השורות והעמודות
  • auto-flow מתורגם ל-grid-auto-flow: column
  • תבנית הזרימה האוטומטית היא 100%, שבמקרה הזה היא רוחב חלון הגלילה

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

יצירת מקבצים

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

באמצעות CSS grid, אפשר להגדיר רשת של תא אחד (כלומר, ריבוע), שבה השורות והעמודות חולקות כינוי ([story]), ואז כל רכיב צאצא מקבל הקצאה למרחב של התא היחיד עם הכינוי:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

כך קובעים את סדר ההצגה של הרכיבים ב-HTML, וגם שומרים על הזרימה של כל הרכיבים. שימו לב שלא היה צורך לבצע פעולות כלשהן לגבי המיקום של absolute או z-index, ולא היה צורך להקיף את התשובה הנכונה בתיבה עם height: 100% או width: 100%. ברשת האב כבר הוגדר הגודל של אזור התצוגה של תמונת הסטורי, כך שלא היה צורך להגדיר לאף אחד מהרכיבים האלה של הסטורי למלא אותו.

נקודות עצירה בגלילה ב-CSS

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

גלילה אופקית ללא סגנונות scroll-snap-points ועם סגנונות scroll-snap-points. בלי ההגדרה הזו, המשתמשים יכולים לגלול בחופשיות כרגיל. הדפדפן עובר בעדינות על כל פריט.
הורה
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
 הורה עם גלילה מעבר לקצה מגדיר את התנהגות ההצמדה.
צאצא
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 ילדים יכולים לבחור להיות יעד להצמדה.

בחרתי ב-Scroll Snap Points מכמה סיבות:

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

תאימות לדפדפנים שונים

בדקנו את התוסף בדפדפנים Opera,‏ Firefox,‏ Safari ו-Chrome, וגם במערכות ההפעלה Android ו-iOS. הנה סיכום קצר של התכונות באינטרנט שבהן מצאנו הבדלים ביכולות ובסיוע.

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

scroll-snap-stop

קרוסלות היו אחד מהתרחישים העיקריים לשימוש בממשק משתמש שהובילו ליצירת המפרט של CSS Scroll Snap Points. בניגוד לסטוריז, קרוסלה לא תמיד צריכה לעצור על כל תמונה אחרי שמשתמש מקיים איתה אינטראקציה. יכול להיות שאין בעיה או שאפילו מומלץ לדפדף במהירות בין התמונות בקרוסלה. לעומת זאת, כשצופים בסטוריז, הכי טוב לצפות בכל סטורי בנפרד, וזה בדיוק מה ש-scroll-snap-stop מאפשר.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

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

אם אתם רוצים לקרוא עוד, תוכלו לעיין במפרט.

overscroll-behavior

קרה לך פעם שגללת בתיבת דו-שיח מודאלית ופתאום התחלת לגלול את התוכן שמאחורי התיבה? ‫overscroll-behavior מאפשרת למפתח ללכוד את הגלילה הזו ולמנוע את היציאה שלה. מתאים לכל מיני אירועים. רכיב הסטורי שלי משתמש בו כדי למנוע מתנועות נוספות של החלקה וגלילה לצאת מהרכיב.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

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

scrollIntoView({behavior: 'smooth'})

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

element.scrollIntoView({
  behavior: 'smooth'
})

‫Safari היה הדפדפן היחיד שלא תמך ב-behavior: 'smooth' כאן. כדאי לעיין בתאימות הדפדפן כדי לראות אם יש עדכונים.

מעשי

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

רמיקסים מהקהילה