יצירת סיורים קבועים באפליקציה

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

הטמעה מומלצת

HTML

<div id="feature-target">Highlight this feature</div>

<!-- MANDATORY: Enforce overlay dialog semantics and accessible name bindings -->
<div id="tour-step" popover="manual" role="dialog" aria-labelledby="tour-title">
  <!-- Assume an <h1> precedes this element in the full document outline -->
  <h2 id="tour-title">Step 1</h2>
  <p>Learn how to use this feature.</p>
  <button popovertarget="tour-step" popovertargetaction="hide">Got it</button>
</div>

CSS

#feature-target {
  anchor-name: --feature-target;
}

#tour-step {
  popover: manual;
  position-anchor: --feature-target;
  position-area: right center;
  inset: auto;
  margin: 1rem;
  padding: 1rem;
  border: 1px solid blue;
  border-radius: 0.5rem;
  background: aliceblue;
}

JavaScript

const tourStep = document.getElementById('tour-step');
tourStep.showPopover();
// MANDATORY: Programmatically route focus into the non-modal popover so keyboard/assistive technology users immediately perceive the new context
tourStep.querySelector('button').focus();

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

• חובה: צריך להשתמש ב-popover="manual" כדי למנוע סגירה בטעות של שלב בסיור במהלך אינטראקציה של המשתמש.
• חובה: מסמנים את מאגר התגים באמצעות role="dialog" ומקשרים את הכותרת שלו באמצעות aria-labelledby.
• חובה: כדי למנוע מצב שבו המיקוד לא נמצא בשום מקום, צריך להעביר את המיקוד הפרוגרמטי לתוך החלון הקופץ מיד אחרי שהוא נפתח.
• מומלץ להשתמש במיקום עוגן ב-CSS כדי לקשר את השלב בסיור לתכונה הספציפית שמוסברת.
• כן כדאי להוסיף כפתור "סגירה" או "הבא" ברור בחלון הקופץ שמשתמש ב-popovertargetaction="hide".

אסטרטגיות חלופיות

תמיכה בדפדפנים וחלופות ל-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 אם זה מתאים לתרחיש לדוגמה.

anchor-positioning

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

אפשרות 1: חלופה ל-polyfill

אפשר להשתמש ב-polyfill של @oddbird/css-anchor-positioning כדי לדמות מיקום של עוגן. היא לא תומכת בעוגנים מרומזים, ולכן חובה להוסיף שמות עוגנים מפורשים לטריגר. בנוסף, position-area לא נתמך בחלונות קופצים על ידי ה-polyfill, ולכן חובה להשתמש ב-anchor() ב-insets הרצויים במקום ב-position-area.

<script type="module">
  if (!CSS.supports('anchor-name: --foo')) {
    await import("https://unpkg.com/@oddbird/css-anchor-positioning");
  }
</script>

#tour-step {
  /* If using the anchor positioning polyfill with a popover, DO use `anchor()` functions instead of `position-area`. */
  left: anchor(right);
  top: anchor(top);
}

אפשרות 2: חלופת CSS ללא Polyfill

אם אתם מעדיפים לא להשתמש ב-polyfill, אתם יכולים להגדיר את ההסבר הקצר כברירת מחדל למיקום קבוע בתחתית אזור התצוגה באמצעות @supports not.

@supports not (anchor-name: --foo) {
  #tour-step {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
}