Popover API מגיע ל-Baseline

Una Kravets

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

מספר תכונות עיקריות של יכולות חלון קופץ כוללות:

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

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

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

• תחילה, מגדירים מאפיין popover לאלמנט שיהווה את החלון הקופץ.
• לאחר מכן מוסיפים id ייחודי לרכיב החלון הקופץ.
• לסיום, כדי לחבר את הלחצן לחלון הקופץ, מגדירים את 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="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>

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

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

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

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

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

• סמנטיקה והמאפיין 'חלון קופץ': למה צריך להשתמש מתי? מאת Hidde de Vries
• בנגישות בחלון קופץ: מה הדפדפן עושה ומה לא עושה על ידי Hidde de Vries
• תיעוד MDN בחלון קופץ