ایجاد کردن گشت‌های برنامه دائمی

تورهای آماده‌سازی به هم‌پوشانی‌هایی نیاز دارند که هنگام تعامل کاربران با ویژگی‌های برجسته‌شده باقی بمانند. برخلاف پاپ‌اورهای خودکار، پاپ‌اورهای دستی وقتی کاربر در جای دیگری از صفحه کلیک می‌کند بسته نمی‌شوند. ترکیب کردن popover="manual" با CSS Anchor Positioning به شما امکان می‌دهد مراحل تور غیرمدال و متصل ایجاد کنید.

پیاده‌سازی توصیه‌شده

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 Anchor Positioning برای متصل کردن مرحله گشت به ویژگی خاصی که توضیح داده می‌شود استفاده کنید.
• باید دکمه «بستن» یا «بعدی» صریحی در پنجره بالاپر که از popovertargetaction="hide" استفاده می‌کند ارائه دهید.

راهبردهای جایگزین

پشتیبانی مرورگر و بازگشت به حالت قبلی برای Popover

«میانای برنامه‌سازی کاربردی Popover» عمدتاً ارتقای پیش‌رو است، اما رفتارهای تعریف‌کننده آن (ارتقای لایه بالایی، رد کردن با کلیک در خارج از عنصر، و فراخوانی popovertarget) معادل CSS-only ندارند. مرورگرهای قدیمی‌تر به شبیه‌ساز مرورگر نیاز دارند، یا اگر ترجیح می‌دهید شبیه‌ساز مرورگر ارسال نکنید، به بازگشت دستی نیاز دارند.

شبیه‌ساز مرورگر: برای پشتیبانی از مشخصه popover در مرورگرهای قدیمی‌تر، @oddbird/popover-polyfill را به‌صورت شرطی بار کنید. اجباری: ویژگی را با بررسی کردن ویژگی popover در HTMLElement.prototype شناسایی کنید و شبیه‌ساز مرورگر را فقط زمانی بار کنید که پشتیبانی بومی وجود ندارد — آن را بدون قیدوشرط بار نکنید.

با بسته‌بندی یا نقشه واردات:

// 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>

هشدار سبک‌بندی: شبیه‌ساز مرورگر نمی‌تواند کلاس کاذب واقعی :popover-open را تعریف کند، بنابراین به‌جای آن کلاس .\:popover-open را اعمال می‌کند. اجباری: این دو را با :is() یا :where() ترکیب کنید، درغیراین‌صورت مرورگرهایی که فاقد :popover-open هستند کل قانون را نادیده می‌گیرند:

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

یا برای بازگشت به نسخه قدیمی بدون شبیه‌ساز مرورگر، از position: fixed استفاده کنید و مختصات را به‌صورت دستی ازطریق getBoundingClientRect() محاسبه کنید یا اگر برای مورد استفاده قابل‌قبول است، به موقعیت‌یابی پیش‌فرض با inset: auto تکیه کنید.

موقعیت‌یابی لنگر

برای پشتیبانی از مرورگرهای بدون موقعیت‌یابی لنگر، می‌توانید بین استفاده از شبیه‌ساز مرورگر یا بازگشت CSS خالص یکی را انتخاب کنید.

گزینه ۱: Polyfill Fallback

از شبیه‌ساز مرورگر @oddbird/css-anchor-positioning می‌توان برای شبیه‌سازی موقعیت‌یابی لنگر استفاده کرد. از لنگرهای ضمنی پشتیبانی نمی‌کند، بنابراین باید نام‌های لنگر صریح را به راه‌انداز اضافه کنید. علاوه‌براین، position-area در پاپ‌اورها توسط شبیه‌ساز مرورگر پشتیبانی نمی‌شود، بنابراین باید به‌جای position-area از anchor() در درج‌های موردنظر استفاده کنید.

<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);
}

گزینه ۲: بازگشت CSS غیرشبیه‌ساز مرورگر

اگر ترجیح می‌دهید از شبیه‌ساز مرورگر استفاده نکنید، می‌توانید بااستفاده از @supports not، نکته‌ابزار را به‌طور پیش‌فرض در موقعیت ثابتی در پایین نمای دید قرار دهید.

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