توجد النوافذ المنبثقة في كل مكان على الويب. ويمكنك الاطّلاع عليها في القوائم ونصائح التبديل ومربّعات الحوار، والتي قد تظهر في صورة إعدادات الحساب وتطبيقات مصغّرة لبيان الإفصاح ومعاينات بطاقات المنتجات. وعلى الرغم من مدى انتشار هذه المكونات، إلا أن إنشائها في المتصفحات لا يزال أمرٌ مرهق بصورة مذهلة. عليك إضافة نص برمجي لإدارة التركيز، وحالات الفتح والإغلاق، والوصلات التي يمكن الوصول إليها في المكونات، وربط لوحة المفاتيح للدخول إلى التجربة والخروج منها، وكل ذلك حتى قبل البدء في إنشاء الوظائف الأساسية المفيدة والفريدة في النافذة المنبثقة.
لحل هذه المشكلة، ستتوفّر مجموعة جديدة من واجهات برمجة تطبيقات HTML التعريفية لإنشاء نوافذ منبثقة في المتصفّحات، بدءًا من واجهة برمجة التطبيقات popover API في الإصدار 114 من Chromium.
سمة النافذة المنبثقة
وبدلاً من إدارة كل مستوى التعقيد بنفسك، يمكنك السماح للمتصفّح بالتعامل معه باستخدام السمة 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!
الخلاصة
واجهة برمجة التطبيقات المنبثقة هي الخطوة الأولى في سلسلة من الإمكانات الجديدة لتسهيل إدارة إنشاء تطبيقات الويب وزيادة إمكانية الوصول إليها تلقائيًا. أنا متحمس لمعرفة كيفية استخدامك للنوافذ المنبثقة!