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

Una Kravets

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

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

سمة popover

توافق المتصفّح

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

لديك الآن قائمة popover تعمل بكامل طاقتها ومرتبطة بزر التبديل وتتضمّن جميع الميزات المضمّنة في popover، ولا يلزم استخدام JavaScript.

الخاتمة

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

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