חדש: Popover API

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

כדי לפתור את הבעיה הזו, אנחנו מוסיפים לדפדפנים קבוצה חדשה של ממשקי API של HTML להצהרה ליצירת חלונות קופצים, החל מ-popover API ב-Chromium 114.

המאפיין popover

במקום לנהל את כל המורכבות בעצמכם, אתם יכולים לאפשר לדפדפן לטפל בזה באמצעות המאפיין popover וקבוצת התכונות הבאה. חלונות קופצים ב-HTML תומכים באפשרויות הבאות:

• קידום לשכבה העליונה חלונות קופצים יופיעו בשכבה נפרדת מעל שאר הדף, כך שלא תצטרכו להתעסק עם z-index.
• פונקציונליות של סגירה קלה לחיצה מחוץ לאזור של חלון הקופץ תסגור אותו ותחזיר את המיקוד.
• ניהול ברירת המחדל של המיקוד פתיחת חלון הקופץ גורמת לכך שהכרטיסייה הבאה תיעצר בתוך חלון הקופץ.
• קיצורי מקשים נגישים לחיצה על המקש esc תסגור את חלון הקופץ ותחזיר את המיקוד.
• קישורי רכיבים נגישים חיבור רכיב חלון קופץ לטריגר של חלון קופץ באופן סמנטי.

עכשיו אפשר ליצור חלונות קופצים עם כל התכונות האלה בלי להשתמש ב-JavaScript. כדי ליצור חלון קופץ בסיסי, נדרשים שלושה דברים:

• מאפיין popover באלמנט שמכיל את חלון הקופץ.
• id באלמנט שמכיל את חלון ה-popover.
• 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
• מסמכי העזרה של MDN בנושא חלונות קופצים
• הסבר על חלונות קופצים של OpenUI