חלונות קופצים קטנים נמצאים בכל מקום באינטרנט. הם מופיעים בתפריטים, בתיאורי הכלים ובתיבות דו-שיח, ומשמשים לתכונות כמו הגדרות חשבון, ווידג'טים של גילוי נאות ותצוגות מקדימות של כרטיסי מוצר. למרות שהרכיבים האלה נפוצים מאוד, עדיין מסורבל מאוד לבנות אותם בדפדפנים. כדי לפתור את הבעיה הזו, אנחנו משיקים בדפדפנים קבוצה חדשה של ממשקי API הצהרתיים של HTML ליצירת חלונות קופצים. הראשון מביניהם הוא Popover API.
אנשים נוטים להתבלבל בין חלון קופץ לבין תיבת דו-שיח. עם זאת, יש כמה הבדלים חשובים בהתנהגות שלהם. רכיב 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.
בדפי פרטי המוצר (PDP) של Tokopedia יש כמה תמונות של כל מוצר. כשלוחצים על התמונה הממוזערת של המוצר, נפתח חלון קופץ שבו מוצגת התמונה המוגדלת. זוהי תבנית נפוצה שמשמשת אתרים של מסחר אלקטרוני.
קוד
ב-Tokopedia משתמשים ב-React לפיתוח חזיתי. לפני שהם הטמיעו את popover API עבור חלון המודל הזה, הם השתמשו בחלון מודל של DOM ובלחצן. הכפתור שינה את מצב React כדי לפתוח את תיבת הדו-שיח. באמצעות ה-API של חלונות קופצים, הם מציינים מאפיין popovertarget ברכיב שפותח את החלון הקופץ עם ערך זהה למזהה של רכיב החלון הקופץ.
ביישום הבסיסי הזה, ה-popover פועל אבל מופיע ונעלם בלי אנימציה. כדי ליצור אנימציית כניסה ויציאה חלקה ל-popover, משתמשים ב-: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,
},
},
});
כדי לתת מענה לדפדפנים שלא תומכים ב-API של חלונות קופצים, Tokopedia הטמיעה את popover-polyfill של oddbird, שגודלו רק 3.2KB עם דחיסת gzip. הם היו מרוצים מה-polyfill כי הוא פעל היטב ולא גרם לירידה בביצועים. בסך הכול, הם הצליחו לצמצם עד 70% משורות הקוד ב-React באמצעות ה-API של חלון קופץ.
נקודות למחשבה כשמשתמשים ב-Popover API
ב-Tokopedia משתמשים ב-React, והצוות הצליח לבצע פיצול קוד על ידי ביטול הטעינה של רכיב ה-popover בדפים שלא נעשה בו שימוש, ואז ביצוע פיצול קוד לתוכן ה-popover. כך הם הקטינו את הגודל של הבקשה הראשונית.
כדאי לשלב בין חלונות קופצים לבין מיקום עוגן ב-CSS (בקרוב ב-Chrome) כדי למקם אותם ביחס לרכיבים אחרים. האפשרות הזו שימושית למשל לתפריטים ולתיאורי כלים.
משאבים
- חדש: Popover API
- ההבדל בין חלון קופץ לבין תיבת דו-שיח
- רוצה לדווח על באג או לבקש תכונה חדשה? אנחנו רוצים לשמוע מכם.
מומלץ לעיין במאמרים האחרים בסדרה הזו כדי לקרוא על היתרונות שחברות מסחר אלקטרוני נהנו מהם בעקבות השימוש בתכונות חדשות של CSS וממשק משתמש, כמו אנימציות מבוססות גלילה, חלונות קופצים, שאילתות של קונטיינרים והסלקטור has().