سجلّ "::backdrop
"
قدّمت واجهة برمجة التطبيقات بملء الشاشة مفاهيم جديدة، مثل الطبقة العلوية والعنصر ::backdrop
.
- الطبقة العلوية هي طبقة تكديس جديدة يتم عرضها الأقرب إلى المستخدم داخل إطار العرض. ولها حجم إطار العرض وتظهر فوق جميع الطبقات الأخرى.
- العنصر الزائف في
::backdrop
هو مربّع بحجم إطار العرض، ويتم عرضه مباشرةً أسفل أي عنصر معروض في الطبقة العلوية.
في ما يلي إحدى الميزات التي حافظت عليها المواصفات الأصلية لحزمة ::backdrop
:
لا يكتسب من أي عنصر ولا يتم اكتسابه منه.
كان ذلك مفيدًا لعزل تصميم ::backdrop
، ولكنّه كان يعني أيضًا عدم حصول ::backdrop
على إذن الوصول إلى أي من السمات المخصّصة التي تم الإعلان عنها في :root
. وقد تسبّب ذلك في حدوث بعض الارتباك بين مطوّري البرامج على الويب.
كحل بديل، كان عليك الإعلان صراحةً عن مواقعك المخصّصة على ::backdrop
وعلى :root
لإتاحتها:
/* Pre-Chrome 122 */
:root, ::backdrop {
--back-color: #333;
}
::backdrop {
background-color: var(--back-color);
}
تعديل على تطبيق "::backdrop
"
لحلّ المشاكل المتعلقة بـ ::backdrop
، تبنّت مجموعة عمل CSS هذه المفاهيم، وتم تحديدها الآن في مواصفات تنسيق موضع CSS.
إلى جانب نقل التعريف إلى مواصفات جديدة، تم تحسين التعريفات.
أحد التحسينات التي لها تأثير مباشر على المطوّرين على الويب هو أنّ العنصر ::backdrop
أصبح الآن عنصر التزام الشجرة، ما يعني أنّه يكتسب أي خصائص يمكن اكتسابها من عنصرها الأصلي.
التوافق مع المتصفح
- 122
- 122
- 120
- 17.4
بفضل هذا التغيير، من الممكن إلغاء قيم الخصائص المخصصة في عناصر معينة وسيتمكن ::backdrop
من الوصول إليها. على سبيل المثال، بإمكان السمة ::backdrop
المرتبطة بعنصر <dialog>
مفتوح الآن الوصول إلى الخصائص المخصّصة المتوفّرة في عنصر <dialog>
هذا.
/* Chrome 122 and up */
:root {
--backdrop-color: #333; /* Any ::backdrop can access this custom property */
}
dialog {
--backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}
::backdrop {
background-color: var(--backdrop-color);
}