מקרים לדוגמה בחלון קופץ

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

חלון קופץ הוא חלק מBaseline Newly Available.

תמיכה בדפדפנים

  • Chrome:‏ 114.
  • Edge: 114.
  • Firefox:‏ 125.
  • Safari: 17.

מקור

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

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

Tokopedia

השימוש במאפייני חלון קופץ הפחית עד 70% של שורות קוד ב-React. אפשר לשלוט בחלון הדו-שיח באופן מקורי באמצעות HTML, במקום לדרוש טיפול באירועים ב-JavaScript ולהשתמש ב-React.createPortal כדי להעביר את ה-DOM של חלון הדו-שיח לסוף document.body. אפשר גם להשתמש ב-@starting-style כדי ליצור אנימציה לפתיחה ולסגירה של חלון הקופץ. – Andy Wihalim, מהנדס תוכנה בכיר, Tokopedia.

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

קוד

ב-Tokopedia משתמשים ב-React לפיתוח הקצה הקדמי שלה. לפני שהטמיעו את ה-API של חלון הקופץ במודל הזה, הם השתמשו במודל DOM ובלחצן. הלחצן שינה את מצב React כדי לפתוח את החלון המודאלי. באמצעות ה-API בחלון קופץ, הם מציינים מאפיין popovertarget ברכיב שפותח את החלון הקופץ עם ערך שזהה למזהה של הרכיב הקופץ.

בהטמעה הבסיסית הזו, חלון הקופץ פועל אבל מופיע ונעלם ללא אנימציה. כדי ליצור אנימציה חלקה של כניסה ויציאה לחלון הקופץ, משתמשים ב-:popover-open וב-@starting-style ומאפשרים אנימציה של מאפיינים נפרדים. בדוגמת הקוד הבאה, ה-popover נעשה גדול יותר או קטן יותר באמצעות המאפיין transform: 'scale()'.

בדוגמת הקוד הזו מוסבר איך מטמיעים אנימציות כניסה ויציאה ל-Popover API.

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  transform: 'scale(0.8)',
  opacity: 0,
  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },

  '&:popover-open': {
    transform: 'scale(1)',
    opacity: 1,
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
  },
});

כדי להתאים לדפדפנים שלא תומכים ב-popover API, ב-Tokopedia הטמיעו את popover-polyfill של oddbird, שמכיל רק 3.2KB עם דחיסת gzip. הם היו מרוצים מה-polyfill כי הוא עבד טוב ולא גרם לנסיגה בביצועים. בסך הכול, הם הצליחו לצמצם עד 70% משורות הקוד ב-React באמצעות ה-API של חלון קופץ.

שיקולים לשימוש ב-Popover API

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

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

משאבים

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