أنماط القوائم المنسدلة وPopovers

توفر HTML Popover API (Chrome 114+ ومدعومة على نطاق واسع) سلوكًا تصريحيًا للإظهار والإخفاء: سمة popover على العنصر المستهدف، وسمة popovertarget على زر التفعيل. لا حاجة إلى JavaScript لعمليتي الفتح والإغلاق الأساسيتين، بما في ذلك الإغلاق بالنقر خارجًا والتعامل مع مفتاح Escape.

استهدف عناصر النوافذ المنبثقة باستخدام [popover] أو :popover-open. يتوفر العنصر الزائف ::backdrop لتعتيم الخلفية. تُعرض النوافذ المنبثقة في الطبقة العليا مثل النوافذ الحوارية، لذلك لا تحدث مشكلات في تكديس z-index.

يحدد CSS Anchor Positioning (Chrome 125+) موضع النافذة المنبثقة بالنسبة إلى عنصر التفعيل من دون JavaScript: استخدم anchor-name: --btn على عنصر التفعيل، وposition-anchor: --btn على النافذة المنبثقة، ثم top: anchor(bottom); left: anchor(left) لمحاذاتها أسفل عنصر التفعيل.

من دون Anchor Positioning، استخدم حاوية أصلية ذات موضع محدد: position: relative على الحاوية، وposition: absolute; top: 100%; left: 0 على القائمة المنسدلة. يعمل هذا الأسلوب عبر المتصفحات، لكنه يتطلب أن يكون عنصر التفعيل والقائمة المنسدلة شقيقين داخل حاوية ذات موضع محدد.

نسّق قائمة العناصر المنسدلة باستخدام position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. تستخدم عناصر القائمة padding وخلفية عند hover، وتُعرض بعرض كامل.

حرّك فتح النوافذ المنبثقة وإغلاقها باستخدام @starting-style للدخول، وtransition-behavior: allow-discrete لتحريك التغيير في خاصية display. يتيح ذلك حركات دخول وخروج تعتمد على CSS فقط وترتبط بحالة فتح النافذة المنبثقة أو إغلاقها.

يجب أن تدعم القوائم المنسدلة لوحة المفاتيح: تتنقل مفاتيح الأسهم بين عناصر القائمة، ويفعّل Enter أو Space العنصر المركّز عليه، ويغلق Escape القائمة ويعيد التركيز إلى عنصر التفعيل. تتعامل Popover API تلقائيًا مع Escape، بينما يتطلب التنقل باستخدام مفاتيح الأسهم معالجة الأحداث في JavaScript.

للقائمة المنسدلة المخصصة التي لا تستخدم Popover API، أضف aria-haspopup="listbox" وaria-expanded إلى عنصر التفعيل، وأضف role="listbox" إلى القائمة، وrole="option" وaria-selected إلى كل عنصر. يعلن قارئو الشاشة حالة التوسيع وعدد العناصر.

قد تتجاوز القائمة المنسدلة الموضوعة أسفل عنصر التفعيل إطار العرض عند حافته السفلية. اكتشف ذلك باستخدام IntersectionObserver أو getBoundingClientRect، واقلب القائمة المنسدلة لتظهر أعلى عنصر التفعيل. يتعامل CSS Anchor Positioning مع ذلك باستخدام position-try-fallbacks.

تضيف القوائم المنسدلة المتداخلة، أي القوائم الفرعية، مزيدًا من التعقيد. ضع القوائم الفرعية إلى يمين عناصرها الأصلية. أضف تأخيرًا قبل الإخفاء عند مغادرة الفأرة، باستخدام CSS transition-delay أو مؤقت JS، لمنع إغلاق القوائم الفرعية أثناء حركة الفأرة القطرية.

تفشل القوائم المنسدلة التي تُفعّل عند hover على أجهزة اللمس، إذ لا توجد حالة hover. استخدم عناصر التفعيل بالنقر أو اللمس على جميع الأجهزة. يعمل الإغلاق بالنقر خارجًا من خلال الإغلاق الخفيف في Popover API أو مستمع نقرات على document يغلق القوائم المنسدلة المفتوحة.

ما الذي توفره Popover API تلقائيًا وكان يتطلب سابقًا JavaScript مخصصًا؟

تتيح Popover API وCSS Anchor Positioning معًا أنماطًا تصريحية للقوائم المنسدلة والنوافذ المنبثقة مع الحد الأدنى من JavaScript. ولتوفير دعم أوسع للمتصفحات، تعمل أنماط الحاويات ذات المواضع المحددة بشكل موثوق. وتكتمل مكوّنات القوائم المنسدلة الجاهزة للإنتاج بإمكانية الوصول باستخدام لوحة المفاتيح، وسمات ARIA، ومعالجة اصطدام إطار العرض، ودعم أجهزة اللمس.