יצירת התראות קופצות

תכונות לאינטרנט: Popover Anchor positioning sibling-count()‎ ו-sibling-index()‎ transition-behavior

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

הנחיות להטמעה

  • חובה: משתמשים ב-popover="manual" כדי שההתראה תישאר גלויה עד שסוגרים אותה באופן מפורש או עד שנגמר הזמן שהוקצב לה על ידי סקריפט.
  • מומלץ להשתמש בקונטיינר כדי לנהל את הערימה של כמה הודעות קצרות. מכיוון שחלונות קופצים בשכבה העליונה מתעלמים מ-z-index של ההורה, צריך למקם אותם בנפרד או בתוך קבוצת פריסה משותפת.
  • מומלץ להשתמש ב-sibling-index()‎ כדי להוסיף שוליים בין התראות קופצות, כך שפריטים שנמצאים נמוך יותר בערימה יהיו גלויים.
  • כן כדאי להוסיף כפתור "סגירה" מפורש בתוך ההודעה הקצרה באמצעות popovertargetaction="hide".
  • מומלץ להשתמש ב-JavaScript לטיימרים של סגירה אוטומטית (למשל, קריאה ל-hidePopover()‎ אחרי 3,000 אלפיות השנייה).
  • מומלץ להשתמש ב-transition-behavior: allow-discrete כדי להוסיף אנימציה לכניסה לשכבה העליונה וליציאה ממנה.

שיטות חלופיות

תמיכה בדפדפנים וחלופות ל-Popover

‫Popover API הוא בעיקר שיפור הדרגתי (progressive enhancement), אבל להתנהגויות שמגדירות אותו – קידום לשכבה העליונה, סגירה בלחיצה מחוץ לאלמנט והפעלה של popovertarget – אין מקבילה ב-CSS בלבד. בדפדפנים ישנים יותר צריך להשתמש ב-polyfill, או להגדיר חלופה ידנית אם אתם מעדיפים לא להשתמש ב-polyfill.

Polyfill: כדי לתמוך במאפיין popover בדפדפנים ישנים יותר, צריך לטעון את @oddbird/popover-polyfill באופן מותנה. חובה: צריך לזהות את התכונה על ידי בדיקת המאפיין popover ב-HTMLElement.prototype, ולטעון את ה-polyfill רק כשאין תמיכה מקומית – אל תטענו אותו ללא תנאי.

עם bundler או מפת ייבוא:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

בלי כלי לאריזת קוד, מייבאים מ-CDN בתוך <script type="module">:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

אזהרה לגבי סגנון: ה-polyfill לא יכול להגדיר את המחלקה המדומה :popover-open, אז הוא מחיל במקום זאת מחלקה .\:popover-open. חובה: צריך לשלב את שניהם עם :is() או :where(), אחרת דפדפנים שאין בהם :popover-open יתעלמו מהכלל כולו:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

לחלופין, כדי להשתמש ב-fallback מדור קודם בלי polyfill, אפשר להשתמש ב-position: fixed ולחשב קואורדינטות באופן ידני באמצעות getBoundingClientRect() או להסתמך על מיקום ברירת המחדל עם inset: auto אם זה מתאים לתרחיש לדוגמה.

‎sibling-index()‎

  • הנחיה: אם אין תמיכה ב-sibling-index()‎, צריך להשתמש באופרטור + כדי להוסיף שוליים באופן ידני. כלומר, popover + popover { margin-top: 1rem }

anchor-positioning

  • הנחיה: השתמשו ב-CSS Anchor Positioning Polyfill. כדי להגדיר חלופה ללא polyfill, מגדירים את ההסבר הקצר כברירת מחדל למיקום קבוע בתחתית אזור התצוגה באמצעות @supports not (anchor-name: --foo).

transition-behavior

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