חדש: Popover API

Una Kravets

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

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

המאפיין popover

תמיכה בדפדפן

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

מקור

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

מקורות מידע נוספים