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

Bramus

سجلّ ::backdrop

قدّمت Fullscreen API مفاهيم جديدة، مثل الطبقة العليا وعنصر ::backdrop.

• الطبقة العلوية هي طبقة جديدة يتمّ عرضها بالقرب من المستخدِم ضمن إطار العرض. يكون حجمها مطابقًا لحجم مساحة العرض وتظهر فوق جميع الطبقات الأخرى.
• العنصر النائب ::backdrop في CSS هو مربّع بحجم إطار العرض، ويتم عرضه مباشرةً تحت أي عنصر معروض في الطبقة العليا.

في ما يلي إحدى ميزات المواصفة الأصلية لرمز ::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);
}

عرض توضيحي يتضمّن عنصر <dialog> الذي يتم فتحه في الطبقة العليا في الإصدار 122 من Chrome والإصدارات الأحدث، يمكن للعنصر ::backdrop الوصول إلى المتغيّر --backdrop-color واستخدامه لتلوين خلفيته.