لمحة عن واجهة برمجة التطبيقات المنبثقة

Una Kravets

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

لحلّ هذه المشكلة، ستتوفّر في المتصفّحات مجموعة جديدة من واجهات برمجة تطبيقات HTML التي تتضمّن شرحًا لإنشاء نوافذ منبثقة، بدءًا من واجهة برمجة التطبيقات popover في Chromium 114.

سمة النافذة المنبثقة

دعم المتصفح

  • Chrome: 114
  • ‫Edge: 114
  • ‫Firefox: 125
  • ‫Safari: 17

المصدر

بدلاً من إدارة كل التعقيد بنفسك، يمكنك السماح للمتصفّح بمعالجة ذلك باستخدام سمة popover ومجموعة الميزات اللاحقة. تتيح النوافذ المنبثقة بتنسيق HTML ما يلي:

  • الترقية إلى الطبقة العليا: ستظهر النوافذ المنبثقة في طبقة منفصلة فوق بقية الصفحة، لذا لن تحتاج إلى تعديل "فهرس z".
  • وظيفة إطفاء الإضاءة سيؤدي النقر خارج منطقة النافذة المنبثقة إلى إغلاقها وإعادة التركيز.
  • إدارة التركيز التلقائية: يؤدي فتح النافذة المنبثقة إلى إيقاف علامة التبويب التالية داخل النافذة المنبثقة.
  • أربطة لوحة مفاتيح يمكن الوصول إليها: سيؤدي الضغط على المفتاح esc إلى إغلاق النافذة المنبثقة وإعادة التركيز.
  • عمليات ربط المكونات القابلة للوصول ربط عنصر النافذة المنبثقة بعامل تشغيل النافذة المنبثقة بشكل دلالي

يمكنك الآن إنشاء مربّعات معلومات منبثقة تتضمّن كل هذه الميزات بدون استخدام JavaScript. يتطلب مربّع النافذة المنبثقة الأساسي ثلاثة عناصر:

  • سمة popover في العنصر الذي يحتوي على النافذة المنبثقة
  • id على العنصر الذي يحتوي على النافذة المنبثقة
  • popovertarget مع قيمة id لعنصر النافذة المنبثقة على العنصر الذي يفتح النافذة المنبثقة
<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

لديك الآن نافذة منبثقة أساسية تعمل بكامل طاقتها.

يمكن استخدام نافذة المنبثقة هذه لنقل معلومات إضافية أو كأداة بيان الإفصاح.

الإعدادات التلقائية وعمليات الإلغاء

بشكلٍ تلقائي، كما هو الحال في مقتطف الرمز السابق، يعني إعداد نافذة منبثقة باستخدام popovertarget أنّ الزر أو العنصر الذي يفتح النافذة المنبثقة سيبدّل حالتها بين الفتح والإغلاق. ومع ذلك، يمكنك أيضًا إنشاء مربّعات معلومات منبثقة صريحة باستخدام popovertargetaction. يؤدي ذلك إلى إلغاء الإجراء التلقائي التبديل. تشمل خيارات popovertargetaction ما يلي:

popovertargetaction="show": يعرض النافذة المنبثقة. popovertargetaction="hide": إخفاء النافذة المنبثقة

باستخدام popovertargetaction="hide"، يمكنك إنشاء زر "إغلاق" داخل نافذة منبثقة، كما هو موضّح في المقتطف التالي:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

النوافذ المنبثقة التلقائية في مقابل النوافذ المنبثقة اليدوية

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

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

إذا اطّلعت على العرض الترويجي أعلاه، يمكنك ملاحظة أنّ النقر خارج منطقة النافذة المنبثقة لا يؤدي إلى إغلاقها. بالإضافة إلى ذلك، إذا كانت هناك نافذة منبثقة أخرى مفتوحة، لن يتم إغلاقها.

لمراجعة الاختلافات:

النوافذ المنبثقة مع popover=auto:

  • عند فتح هذه النافذة، يمكنك فرض إغلاق النوافذ المنبثقة الأخرى.
  • يمكن إغلاق الشاشة من خلال ضوء.

النوافذ المنبثقة التي تحتوي على popover=manual:

  • عدم فرض إغلاق أي نوع عنصر آخر
  • يُرجى عدم إغلاق الجهاز بالضوء. يمكنك إغلاقها باستخدام زر تبديل أو إجراء إغلاق.

تصميم النوافذ المنبثقة

لقد تعرّفت حتى الآن على أساسيات النوافذ المنبثقة في HTML. ولكن هناك أيضًا بعض ميزات التصميم الرائعة التي يوفّرها popover. ومن هذه الميزات إمكانية تصميم ::backdrop.

في النوافذ المنبثقة auto، هذه هي الطبقة التي تقع أسفل الطبقة العليا مباشرةً (حيث تظهر النافذة المنبثقة)، والتي تقع فوق بقية الصفحة. في المثال التالي، يتم إعطاء ::backdrop لونًا شبه شفاف:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

الفرق بين popover وdialog

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

عنصر dialog الذي يتم فتحه باستخدام dialog.showModal (مربّع حوار مشروط) هو تجربة تتطلّب تفاعلًا واضحًا من المستخدِم لإغلاق مربّع الحوار المشروط. يتيح popover إغلاق النافذة من خلال لمسها. ولا ينطبق ذلك على نمط dialog. يؤدي مربّع الحوار المشروط إلى جعل بقية الصفحة غير نشطة. أما popover، فلا يعني ذلك.

العرض الترويجي أعلاه هو مربّع حوار دلالي مع سلوك النافذة المنبثقة. وهذا يعني أنّ بقية الصفحة ليست غير نشطة وأنّ النافذة المنبثقة للمربّع الحوار تحصل على سلوك إغلاق خفيف. يمكنك إنشاء مربّع الحوار هذا باستخدام سلوك النافذة المنبثقة باستخدام الرمز البرمجي التالي:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

قريبًا

الدخول والخروج التفاعليان

لا تتوفّر في المتصفّحات بعد إمكانية تحريك الخصائص المنفصلة، بما في ذلك إضافة الصور المتحركة من display: none وإليها وإضافة الصور المتحركة من وإلى الطبقة العليا. ومع ذلك، من المخطّط طرحها في إصدار قادم من Chromium بعد هذا الإصدار بوقت قصير.

من خلال إمكانية إضافة مؤثرات متحركة إلى السمات المنفصلة، واستخدام :popover-open و@starting-style، ستتمكّن من إعداد أنماط ما قبل التغيير وما بعد التغيير لتفعيل عمليات النقل السلسة عند فتح النوافذ المنبثقة وإغلاقها. خذ المثال السابق. تبدو عملية عرض الإعلانات المتحركة وإخفائها أكثر سلاسة، ما يساهم في توفير تجربة مستخدم أكثر سلاسة:

موضع الرابط

النوافذ المنبثقة رائعة عندما تريد وضع تنبيه أو نموذج أو إشعار بناءً على إطار العرض. لكن النوافذ المنبثقة مفيدة أيضًا للقوائم والتلميحات والعناصر الأخرى التي يجب وضعها بالنسبة للعناصر الأخرى. وهنا يأتي دور CSS anchoring.

يستخدِم الإصدار التجريبي التالي من القائمة الشعاعية واجهة برمجة التطبيقات popover API مع تحديد موضع عنصر التثبيت في CSS لضمان تثبيت النافذة المنبثقة #menu-items دائمًا بعنصر التفعيل الذي يشغّلها أو يوقفها، وهو الزر #menu-toggle.

يشبه إعداد عناصر الربط إعداد النوافذ المنبثقة:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

يمكنك إعداد ارتساء من خلال منحه id (في هذا المثال، #menu-toggle)، ثم استخدام anchor="menu-toggle" لربط العنصرَين. يمكنك الآن استخدام anchor() لتنسيق النافذة المنبثقة. يمكن وضع قائمة منبثقة في المنتصف تم تثبيتها في قاعدة مفتاح التبديل الخاص بالربط على النحو التالي:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

أصبح لديك الآن قائمة منبثقة كاملة الوظائف ترتكز على زر التبديل وتحتوي على جميع الميزات المضمَّنة للنوافذ المنبثقة، بدون الحاجة إلى JavaScript.

الخاتمة

واجهة برمجة التطبيقات الخاصة بـ منبثقة هي الخطوة الأولى في سلسلة من الإمكانات الجديدة لتسهيل إدارة إنشاء تطبيقات الويب وتسهيل الوصول إليها بشكل تلقائي. أنا متحمس لمعرفة كيف تستخدم النوافذ المنبثقة!

موادّ إضافية للقراءة