חדש: Popover API

Una Kravets

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

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

מאפיין החלון הקופץ

תמיכה בדפדפן

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

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