חלונות קופצים מופיעים בכל מקום באינטרנט. ניתן לראות אותם בתפריטים, בטיפים ובתיבות דו-שיח, המשמשים לתכונות כמו הגדרות חשבון, ווידג'טים של גילוי נאות ותצוגות מקדימות של כרטיסי מוצרים. למרות השכיחות של הרכיבים האלה, הבנייה שלהם בדפדפנים עדיין יכולה להיות מסורבלת באופן מפתיע. כדי לפתור את הבעיה, זמינה לדפדפנים קבוצה חדשה של ממשקי API ל-HTML הצהרתיים שמיועדים ליצירת חלונות קופצים. הראשון מביניהם הוא Popover API.
חלון קופץ הוא חלק מתצוגת הבסיס החדשה זמינה.
בדרך כלל מתבלבלים בין חלון קופץ לבין תיבת דו-שיח. עם זאת, יש כמה הבדלים עיקריים בהתנהגות שלהם. רכיב dialog שנפתח באמצעות dialog.showModal (תיבת דו-שיח מודאלית) הוא חוויה שבה נדרשת אינטראקציה מפורשת של המשתמש כדי לסגור את החלון. popover תומך בסגירה קלה. מודל dialog לא עושה זאת.
תיבת דו-שיח מראהית הופכת את שאר הדף ללא יציב. popover לא.
מידע נוסף על ההבדלים
המאמר הזה הוא חלק מסדרה שעוסקת באופן שבו חברות מסחר אלקטרוני שיפרו את האתר שלהן באמצעות תכונות חדשות ב-CSS ובממשק המשתמש. במאמר הזה מוסבר איך Tokopedia מטמיעה והפיקו תועלת מ-Popover API.
טוקופדיה
השימוש במאפיינים של חלון קופץ הפחית עד 70% משורות הקוד ב-React. אפשר לשלוט בממשק המרכזי באמצעות HTML במקום לדרוש טיפול באירועים ב-JavaScript, ולהשתמש ב-
React.createPortalכדי להעביר את ה-DOM המסוגל לסוף שלdocument.body. אנחנו גם יכולים להשתמש ב-@starting-styleכדי להנפיש את הפתיחה והסגירה של החלון הקופץ — אנדי ויהאלים, מהנדס תוכנה בכיר, Tokopedia.
דפי פרטי המוצר (PDP) של Tokopedia כוללים מספר תמונות של כל מוצר. כשלוחצים על התמונה הממוזערת של המוצר, נפתח חלון להצגת התמונה המוגדלת. זהו דפוס נפוץ באתרים של מסחר אלקטרוני.
קוד
ב-Tokopedia משתמשים ב-React כדי לפתח את ממשק החזית שלהם. לפני ההטמעה של ה-API הקופץ של החלון הזה, הם השתמשו בחלון מודאלי של DOM ובלחצן. הלחצן שינה את המצב של React כדי לפתוח את החלון. באמצעות ה-API של Popover, הם מציינים
מאפיין popovertarget באלמנט שפותח את החלון הקופץ עם ערך
זהה למזהה של הרכיב הקופץ.
באפליקציה הבסיסית הזו, החלון הקופץ פועל אבל מופיע ונעלם ללא אנימציה. כדי ליצור אנימציית כניסה ויציאה חלקה עבור החלון הקופץ, השתמשו ב-:popover-open וב-@starting-style ולאפשר אנימציה של מאפיינים שונים.
בדוגמת הקוד הבאה, החלון הקופץ יכול לשנות את גודל החלון ואת גודל החלון באמצעות המאפיין transform: 'scale()'.
הדוגמה הזו לקוד ממחישה איך להטמיע אנימציות כניסה ויציאה ב-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',
'@starting-style': {
transform: 'scale(1)',
opacity: 1,
},
transform: 'scale(0.8)',
opacity: 0,
'&:popover-open': {
'@starting-style': {
transform: 'scale(0.8)',
opacity: 0,
},
transform: 'scale(1)',
opacity: 1,
},
});
כדי לספק תמיכה בדפדפנים שלא תומכים ב-Popover API, ב-Tokopedia הטמיעו את popover-polyfill על ידי missingbird, בנפח של 3.2KB בלבד עם דחיסת gzip. הם היו מרוצים מה-Polyfill כי הוא עבד טוב ולא גרמו לרגרסיות של ביצועים. באופן כללי, הם הצליחו להפחית עד 70% משורות הקוד ב-React באמצעות ה-API של Popover.
נקודות למחשבה כשמשתמשים ב-Popover API
ב-Tokopedia משתמשים ב-React, והצוות השיג את פיצול הקוד על ידי ניתוק הרכיב של החלון הקופץ לדפים שלא משתמשים בו, ואז פיצול קוד לתוכן שבחלון הקופץ. כך הוא הקטין את גודל הבקשה הראשונית.
כדאי לשלב חלונות קופצים עם מיקום של עוגן ב-CSS (בקרוב ב-Chrome) כדי למקם אותם ביחס לאלמנטים אחרים. לדוגמה, האפשרות הזו שימושית כשמדובר בתפריטים ובהסברים קצרים.
משאבים
- חדש: Popover API
- ההבדל בין חלון קופץ לתיבת דו-שיח
- רוצה לדווח על באג או לבקש תכונה חדשה? אנחנו רוצים לשמוע ממך.
קוראים את המאמרים האחרים בסדרה הזו, שבהם מוסבר איך חברות מסחר אלקטרוני נהנו מהשימוש ב-CSS ובתכונות חדשות של ממשק המשתמש, כמו אנימציות שמבוססות על גלילה, חלון קופץ, שאילתות בקונטיינרים והבורר has().