التغييرات في الاكتساب على صفحات الأنماط المتتالية (CSS) ::backdrop

Bramus

سجلّ "::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 أصبح الآن عنصر التزام الشجرة، ما يعني أنّه يكتسب أي خصائص يمكن اكتسابها من عنصرها الأصلي.

بفضل هذا التغيير، من الممكن إلغاء قيم الخصائص المخصصة في عناصر معينة وسيتمكن ::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);
}