Popover API מגיע ל-Baseline

Una Kravets

זה קורה! אחת התכונות שאני הכי מתרגש ממנה הגיעה עכשיו לכל הדפדפנים המודרניים והיא חלק רשמי מ-Baseline 2024. התכונה הזו היא Popover API. ב-Popover יש כל כך הרבה רכיבים בסיסיים ומאפיינים למפתחים שאפשר להשתמש בהם כדי ליצור ממשקים שכבתיים, כמו כלי עזר, תפריטים, ממשקי משתמש חינוכיים ועוד.

תמיכה בדפדפנים

  • Chrome: ‏ 114.
  • Edge: 114.
  • Firefox: ‏ 125.
  • Safari: 17.

מקור

אלה כמה נקודות עיקריות לגבי היכולות של חלונות קופצים:

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

יצירת חלונות קופצים

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

  • קודם כול, מגדירים מאפיין popover ברכיב שיהיה חלון הקופץ.
  • לאחר מכן מוסיפים id ייחודי לרכיב ה-popover.
  • לסיום, כדי לחבר את הלחצן לחלון הקופץ, מגדירים את popovertarget של הלחצן לערך של id של רכיב החלון הקופץ.

הקוד הבא מראה את זה:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
דוגמה בסיסית לשימוש במאפיין popover.

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

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
דוגמה לחלון קופץ ידני.

חלון קופץ לעומת תיבת דו-שיח של חלון עזר

יכול להיות שתהיתם אם צריך להשתמש בחלון קופץ כשיש תיבת דו-שיח. התשובה היא: יכול להיות שלא.

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

הרכיב המודלי <dialog>

  • נפתח באמצעות dialog.showModal().
  • נסגר באמצעות dialog.close().
  • משבית את שאר הדף.
  • אין תמיכה בהתנהגות של סגירה קלה.
  • אפשר לעצב את המצב הפתוח באמצעות המאפיין [open].
  • מייצג באופן סמנטי רכיב אינטראקטיבי שחוסם את האינטראקציה עם שאר הדף.

המאפיין [popover]

  • אפשר לפתוח אותו באמצעות מפעיל דקלרטיבי (popovertarget).
  • נסגר באמצעות popovertarget (חלון קופץ אוטומטי) או popovertargetaction=hide (חלון קופץ ידני).
  • לא משבית את שאר הדף.
  • תמיכה בהתנהגות של סגירה קלה.
  • אפשר לעצב את המצב הפתוח באמצעות פסאודו-הקלאס :popover-open.
  • אין סמנטיקה מובנית.

סיכום וקריאה נוספת

יש הרבה תכונות מלהיבות ש-popover מביאה לפלטפורמה. כדי לקבל מידע נוסף על ה-API הזה, כולל מידע נוסף על הנגישות של התכונה ומסמכים לגבי קבוצת התכונות, מומלץ לקרוא את המאמרים הבאים: