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

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

Adam Argyle

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

הדגמה

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

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

סקירה כללית

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

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

יצירת מקבצים

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

בעזרת רשת CSS אנחנו יכולים להגדיר רשת של תא יחיד (כלומר ריבוע), שבה לשורות ולעמודות יש כינוי ([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 מאפשר לנעול רכיבים באזור התצוגה בזמן גלילה. לפני שהמאפיינים האלה של CSS היו קיימים, צריך היה להשתמש ב-JavaScript, וזה היה… מסובך, בלשון המעטה. במאמר Introducing CSS Scroll Snap Points של Sarah Drasner מוסבר בפירוט איך להשתמש בהן.

גלילה אופקית בלי ובלי סגנונות 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;
}
 ילדים יכולים להביע הסכמה להפוך ליעד של Snap.

בחרתי ב'נקודות הצמדה לגלילה' מכמה סיבות:

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

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

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

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