إنشاء إشعارات منبثقة

إشعارات Toast هي رسائل حالة عابرة. وعلى عكس القوائم، يجب ألا يتم إغلاقها عندما يتفاعل المستخدم مع أجزاء أخرى من الصفحة. تُعدّ الحالة popover="manual" مثالية لأنّها لا تتضمّن سلوك "الإغلاق البسيط" وتسمح بظهور إشعارات متعددة في الوقت نفسه.

إرشادات التنفيذ

• إجراء إلزامي: استخدِم popover="manual" ليبقى الإشعار مرئيًا إلى أن يتم إغلاقه صراحةً أو تنتهي مهلته من خلال نص برمجي.
• يجب استخدام حاوية لإدارة تكديس رسائل الإعلام المؤقتة المتعددة. بما أنّ النوافذ المنبثقة في الطبقة العليا تتجاهل قيمة z-index للعنصر الرئيسي، يجب تحديد موضعها بشكل فردي أو ضمن مجموعة تخطيط مشتركة.
• يُفضَّل استخدام sibling-index()‎ لإضافة هامش بين إشعارات الإرسال السريع لكي تظهر العناصر في أسفل الحزمة.
• يجب توفير زر "إغلاق" صريح داخل الإشعار المؤقت باستخدام popovertargetaction="hide".
• يُرجى استخدام JavaScript لمؤقتات الإغلاق التلقائي (مثلاً، استدعاء hidePopover()‎ بعد 3000 ملي ثانية).
• يجب استخدام السمة transition-behavior: allow-discrete لتحريك الدخول والخروج من الطبقة العليا.

الاستراتيجيات الاحتياطية

الخيارات الاحتياطية وتوافق المتصفّحات مع Popover

تعتمد واجهة Popover API في الغالب على التحسين التدريجي، ولكن سلوكياتها المحدّدة، مثل الترقية إلى الطبقة العليا والإغلاق البسيط واستدعاء popovertarget، ليس لها مكافئ في CSS فقط. تحتاج المتصفّحات القديمة إلى polyfill أو إلى إجراء احتياطي يدوي إذا كنت تفضّل عدم شحنها.

Polyfill: لإتاحة السمة popover في المتصفّحات القديمة، يمكنك تحميل @oddbird/popover-polyfill بشكل مشروط. إجراء إلزامي: يجب رصد الميزة من خلال التحقّق من السمة popover في HTMLElement.prototype، وتحميل polyfill فقط في حال عدم توفّر الدعم الأصلي، ويجب عدم تحميله بدون شروط.

باستخدام حزمة أو خريطة استيراد:

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

بدلاً من ذلك، يمكنك استخدام position: fixed واحتساب الإحداثيات يدويًا من خلال getBoundingClientRect() أو الاعتماد على تحديد الموضع التلقائي باستخدام inset: auto إذا كان ذلك مقبولاً لحالة الاستخدام، وذلك كحل بديل قديم بدون polyfill.

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 لإضافة صور متحركة من خلال الفئات أثناء انتقال عنصر الإشعار المؤقت إلى الداخل والخارج.