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