اعلان‌های کادری پیام‌های وضعیت گذرا هستند. برخلاف منوها، وقتی کاربر با بخش‌های دیگر صفحه تعامل برقرار می‌کند، نباید بسته شوند. حالت popover="manual" ایده‌آل است زیرا رفتار «light-dismiss» ندارد و اجازه می‌دهد چندین اعلان به‌طور هم‌زمان وجود داشته باشند.
رهنمودهای پیاده‌سازی
- اجباری: از popover="manual" استفاده کنید تا اعلان تا زمانی که صریحاً بسته شود یا زمان آن توسط یک اسکریپت تمام شود، قابل‌مشاهده باقی بماند.
- باید از یک محفظه برای مدیریت پشته‌سازی چند پیام موقت استفاده کنید. ازآنجایی‌که پاپ‌اورها در «لایه بالایی» شاخص z والد را نادیده می‌گیرند، باید آن‌ها را به‌صورت جداگانه یا در یک گروه چیدمان مشترک قرار دهید.
- باید از sibling-index() برای افزودن حاشیه بین اعلان‌های زودگذر استفاده کنید تا موارد پایین‌تر در پشته قابل‌مشاهده باشند.
- باید بااستفاده از popovertargetaction="hide"، دکمه «بستن» صریحی در اعلان زودگذر ارائه دهید.
- باید از جاوا اسکریپت برای زمان‌سنج‌های رد کردن خودکار استفاده کنید (برای مثال، فراخوانی hidePopover() پس‌از ۳۰۰۰ میلی‌ثانیه).
- باید از transition-behavior: allow-discrete برای پویانمایی ورود و خروج از «لایه بالایی» استفاده کنید.
راهبردهای جایگزین
پشتیبانی مرورگر و بازگشت به حالت قبلی برای 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 تکیه کنید.
sibling-index()
- راهنمایی: اگر sibling-index() پشتیبانی نمی‌شود، از عملگر
+برای افزودن دستی حاشیه استفاده کنید. یعنیpopover + popover { margin-top: 1rem }
موقعیت‌یابی لنگر
- راهنمایی: از CSS Anchor Positioning Polyfill استفاده کنید. برای بازگشت به حالت قبلی غیرشبیه‌ساز مرورگر، نکته‌ابزار را بااستفاده از
@supports not (anchor-name: --foo)به‌طور پیش‌فرض در موقعیت ثابتی در پایین نمای دید قرار دهید.
transition-behavior
- راهنمایی: اگر transition-behavior پشتیبانی نمی‌شود، از JavaScript برای افزودن پویانمایی ازطریق کلاس‌ها هنگام انتقال عنصر toast به داخل و خارج استفاده کنید.