חלונות קופצים נמצאים בכל מקום באינטרנט. אפשר לראות אותם בתפריטים, בטיפים להחלפת מצב ובתיבות דו-שיח. ניתן לראות אותם כהגדרות חשבון, בווידג'טים של גילוי נאות ובתצוגות מקדימות של כרטיסי מוצרים. למרות מידת הנפוצות של הרכיבים האלה, הבנייה שלהם בדפדפנים עדיין מסורבלת באופן מפתיע. צריך להוסיף סקריפטים כדי לנהל את המיקוד, מצבי הפתיחה והסגירה, קטעי הוק (hooks) נגישים לרכיבים, קישורי מקלדת כדי להיכנס לחוויה ולצאת ממנה, וכל זה עוד לפני שמתחילים ליצור את הפונקציונליות העיקרית השימושית והייחודית של החלון הקופץ.
כדי לפתור את הבעיה, קבוצה חדשה של ממשקי API הצהרתיים של HTML ליצירת חלונות קופצים תהיה זמינה לדפדפנים, החל מ-API popover ב-Chromium 114.
מאפיין החלון הקופץ
במקום לנהל את כל המורכבות בעצמכם, אתם יכולים לאפשר לדפדפן לטפל בבעיה באמצעות המאפיין popover וקבוצת התכונות הבאה. תמיכה במודעות קופצות ב-HTML:
- קידום לשכבה העליונה. חלונות קופצים יופיעו בשכבה נפרדת מעל לשאר הדף, כך שאין צורך להסתובב בתוך האינדקס z-index.
- פונקציונליות עם סגירה קלה. לחיצה מחוץ לאזור הקופץ תסגור את החלון הקופץ ותחזיר את המיקוד.
- ברירת מחדל לניהול ההתמקדות. פתיחת החלון הקופץ תגרום לעצירת הכרטיסייה הבאה בתוך החלון הקופץ.
- קישורי מקלדת נגישים. הקשה על המקש
escתסגור את החלון הקופץ ותחזיר את המיקוד. - קישורי רכיבים נגישים. חיבור של אלמנט קופץ לטריגר של חלון קופץ באופן סמנטי.
עכשיו אפשר ליצור חלונות קופצים עם כל התכונות האלה בלי להשתמש ב-JavaScript. כדי ליצור חלון קופץ בסיסי נדרשים שלושה דברים:
- מאפיין
popoverברכיב שמכיל את החלון הקופץ. idברכיב שמכיל את החלון הקופץ.popovertargetעם הערך שלidשל החלון הקופץ ברכיב שפותח את החלון הקופץ.
<button popovertarget="my-popover"> Open Popover </button>
<div id="my-popover" popover>
<p>I am a popover with more information.</p>
</div>
עכשיו יש לך חלון קופץ בסיסי שפועל באופן מלא.
ניתן להשתמש בחלון הקופץ הזה כדי להעביר מידע נוסף או כווידג'ט של גילוי נאות.
ברירות מחדל ושינויים
כברירת מחדל, כמו בקטע הקוד הקודם, אם מגדירים חלון קופץ עם popovertarget, הלחצן או הרכיב שפותחים את החלון הקופץ מחליפים אותו במצב פתוח וסגור. עם זאת, אפשר גם ליצור חלונות קופצים ספציפיים באמצעות popovertargetaction. ההגדרה הזו מבטלת את פעולת ברירת המחדל של החלפת המצב. האפשרויות של popovertargetaction כוללות:
popovertargetaction="show": הצגת החלון הקופץ.
popovertargetaction="hide": הסתרת החלון הקופץ.
באמצעות popovertargetaction="hide" אפשר ליצור לחצן 'סגירה' בתוך חלון קופץ, כמו בקטע הקוד הבא:
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
חלונות קופצים אוטומטיים לעומת חלונות קופצים ידניים
שימוש במאפיין popover לבדו הוא קיצור דרך של popover="auto". אם פותחים את החלון הזה, ברירת המחדל popover תאלץ סגירה של חלונות קופצים אוטומטיים אחרים, למעט חלונות קופצים של ישויות אב. אפשר לסגור אותה באמצעות כיבוי אור או לחצן סגירה.
לעומת זאת, הגדרה של popover=manual יוצרת סוג אחר של חלון קופץ: חלון קופץ ידני. הן לא מאלצות סגירה של סוג רכיב אחר ולא נסגרות באמצעות סגירת אור. צריך לסגור אותן באמצעות טיימר או פעולת סגירה מפורשת. סוגי חלונות קופצים שמתאימים ל-popover=manual הם רכיבים שמופיעים ונעלמים, אבל הם לא אמורים להשפיע על שאר הדף, כמו הודעה שנשלחת אליכם.
אם תעיינו בהדגמה שלמעלה, תוכלו לראות שלחיצה מחוץ לאזור הקופץ לא גורמת לסגירה של החלון הקופץ. בנוסף, אם היו חלונות קופצים אחרים פתוחים, הם לא היו נסגרים.
כדי לבדוק את ההבדלים:
חלונות קופצים עם popover=auto:
- אם פותחים חלון קופץ, סוגרים אותו בכוח.
- אפשרות לסגור את התאורה.
חלונות קופצים עם popover=manual:
- אין לסגור בכוח אף סוג רכיב אחר.
- אסור לסגור את התאורה. סוגרים אותן באמצעות מתג או פעולת סגירה.
עיצובים קופצים
עד עכשיו למדת על חלונות קופצים בסיסיים ב-HTML. אבל יש גם כמה תכונות עיצוב נחמדות שכלולות ב-popover. אחת מהן היא היכולת לעצב ::backdrop.
בחלון קופץ מסוג auto, זוהי שכבה שנמצאת ישירות מתחת לשכבה העליונה (שבה נמצא החלון הקופץ), שנמצאת מעל שאר הדף. בדוגמה הבאה, ::backdrop מקבל צבע שקוף למחצה:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
ההבדל בין popover לבין dialog
חשוב לציין שהמאפיין popover לא מספק סמנטיקה בפני עצמו. עכשיו אפשר להשתמש ב-popover="auto" כדי ליצור חוויות דמויות דו-שיח של מודלים, אבל יש כמה הבדלים חשובים בין השניים:
רכיב dialog שנפתח באמצעות dialog.showModal (תיבת דו-שיח מודאלית), הוא חוויה שדורשת אינטראקציה מפורשת של המשתמש כדי לסגור את חלון העזר.
popover תומך בסגירת אור. מודל dialog לא עושה זאת.
תיבת דו-שיח מודאלית הופכת את שאר הדף לאינטנטי. popover לא.
ההדגמה שלמעלה היא תיבת דו-שיח סמנטית עם התנהגות של חלון קופץ. המשמעות היא ששאר החלקים בדף לא יציבים, ושהחלון הקופץ של תיבת הדו-שיח כן מקבל התנהגות של סגירה קלה. אפשר ליצור תיבת דו-שיח זו עם התנהגות של חלון קופץ באמצעות הקוד הבא:
<button popovertarget="candle-01">
Quick Shop
</button>
<dialog popover id="candle-01">
<button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
<div class="product-preview-container">
...
</div>
</dialog>
בקרוב
כניסה ויציאה אינטראקטיביות
היכולת להוסיף אנימציה למאפיינים מובחנים, כולל הוספת אנימציה ל-display: none וממנו ואנימציה לשכבה העליונה, לא זמינה עדיין בדפדפנים. עם זאת, הן מתוכננות לגרסה עתידית של Chromium, בדומה לגרסה הזו.
היכולת להוסיף אנימציה למאפיינים נפרדים ושימוש ב-:popover-open וב-@starting-style, מאפשרת להגדיר סגנונות לפני השינוי ואחרי השינוי כדי לאפשר מעברים חלקים בפתיחה ובסגירה של חלונות קופצים. ניקח לדוגמה את הדוגמה הקודמת. אנימציה פנימה והחוצה נראית הרבה יותר חלקה ותומכת בחוויית משתמש זורמת יותר:
מיקום העוגן
חלונות קופצים הם כלי מצוין כשרוצים למקם התראה, חלון או התראה על סמך אזור התצוגה. עם זאת, חלונות קופצים שימושיים גם לתפריטים, להסברים קצרים ולרכיבים אחרים שיש למקם אותם ביחס לרכיבים אחרים. כאן נכנסים לתמונה הצמדה של CSS.
בהדגמה של התפריט הרדיאלי הבא נעשה שימוש ב-API בחלון קופץ יחד עם מיקום העוגן של CSS כדי להבטיח שהחלון הקופץ #menu-items מעוגן תמיד לטריגר שלו, הלחצן #menu-toggle.
הגדרת עוגנים דומה להגדרת חלונות קופצים:
<button id="menu-toggle" popovertarget="menu-items">
Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
<li class="item">...</li>
<li class="item">...</li>
</ul>
כדי להגדיר עוגן, נותנים לו id (בדוגמה הזו, #menu-toggle), ואז משתמשים ב-anchor="menu-toggle" כדי לחבר בין שני הרכיבים. עכשיו אפשר להשתמש ב-anchor() כדי לעצב את החלון הקופץ. תפריט קופץ מרוכז שמוצמד לבסיס של מתג העוגן עשוי להיות מעוצב כך:
#menu-items {
bottom: anchor(bottom);
left: anchor(center);
translate: -50% 0;
}
עכשיו יש לכם תפריט קופץ עם פונקציונליות מלאה שמוצמד למתג וכולל את כל התכונות המובנות של חלון קופץ, ללא צורך ב-JavaScript!
סיכום
ממשק ה-API לשימוש בחלון קופץ הוא השלב הראשון בסדרת יכולות חדשות שנועדו להקל על הניהול של אפליקציות האינטרנט והנגישות שלהן כברירת מחדל. אני שמח לראות איך אתה משתמש בחלונות קופצים!