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

Una Kravets

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

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

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

دعم المتصفح

  • 114
  • 114
  • 125
  • 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.

يستخدم العرض التوضيحي للقائمة الشعاعي التالي واجهة برمجة التطبيقات المنبثق مع تحديد موضع ارتساء 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.

الخاتمة

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

قراءة إضافية