أسماء CSS التي يحدّدها المؤلف وshadow DOM: من الناحية العملية والعملية

Noam Rosenthal

من المفترض أن تعمل أسماء CSS المحددة المؤلفون وshadow DOM معًا. ومع ذلك، لا تتوافق المتصفحات مع المواصفات، أحيانًا مع كل الأخرى، وكل اسم CSS يكون غير متسق بطريقة مختلفة قليلاً.

توثّق هذه المقالة الحالة الحالية لسلوك أسماء CSS التي يحدّدها المؤلف. عبر نطاقات الظل، على أمل أن تكون بمثابة دليل لتحسين التوافقية في المستقبل القريب.

ما هي أسماء CSS التي يحددها المؤلف؟

تعد أسماء CSS التي يحددها المؤلف آلية قديمة نسبيًا لبناء جملة CSS، وهي في الأصل تم تقديمه لقاعدة @keyframes، التي تعرِّف السمة <keyframe-name> على أنّها إما معرف مخصص أو سلسلة. إن الغرض من هذا المفهوم هو توضيح شيء ما في جزء واحد من ورقة الأنماط، ونشير إليه في جزء آخر.

/* "fade-in" is a CSS name, representing a set of keyframes */
@keyframes fade-in {
  from { opacity: 0 };
  to { opacity: 1 }
}

.card {
  /* "fade-in" is a reference to the above keyframes */
  animation-name: fade-in;
}

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

الميزة	بيان الاسم	مرجع الاسم
الإطارات الرئيسية	@keyframes	animation-name
الخطوط	@font-face { } @font-palette-values	font-family font-palette
بيانات اعتماد المواقع	@property	أي خاصية مخصصة
عرض النقل	view-transition-name view-transition-class	::view-transition-group()
موضع ارتساء	anchor-name	position-anchor
مؤثرات حركية قائمة بالتمرير	animation-timeline	view-timeline-name scroll-timeline-name
نمط العدّاد	@counter-style Counter-reset counter-set counter-increment	list-style
طلبات البحث الخاصة بالحاويات	container-name	@container
متغيّر CSS	--something	var(--something)
الصفحة	@page

كما ترى في الجدول، عادةً ما يكون لـ اسم CSS لغة CSS مقابلة المرجع على سبيل المثال، animation-name هو مرجع إلى @keyframes. الاسم. تختلف أسماء CSS عن الأسماء المحددة في DOM، مثل السمات وأسماء علاماتها، حيث يتم تعريفها ثم الرجوع إليها في سياق وأوراق الأنماط.

كيفية ارتباط الأسماء بـ shadow DOM

بينما يتم إنشاء أسماء CSS لإنشاء علاقات بين أجزاء مختلفة من أو ورقة الأنماط، فإن Shadow DOM عبارة عن مصممة لفعل العكس. وهو يغلف العلاقات حتى لا تسرب عبر مكونات الويب التي من المفترض أن يكون لها مساحة اسم خاصة بها.

من خلال الجمع بين أسماء CSS وshadow DOM معًا، تصبح تجربة إنشاء يجب أن تبدو مكونات الويب معبّرة بما يكفي لتكون مرنة ولكن مقيدة بما يكفي لتكون مستقرة.

هذا جيد من الناحية النظرية. من الناحية العملية، إنّ المتصفّحات غير متّسقة في طريقة استخدام CSS. يمكن تبادل الأسماء مع shadow DOM، وكلاهما بين العنصرين في المتصفح، وعبر المتصفحات، وبين الميزات والمواصفات.

كيفية عمل الأسماء وshadow DOM معًا

لفهم المشكلة، من المهم فهم كيفية عمل هذه الأجزاء من CSS معًا من الناحية النظرية.

القاعدة العامة

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

استثناء على القاعدة: @property

على عكس أسماء CSS الأخرى، لا يتم تغليف خصائص CSS بواسطة shadow DOM. ولكنها، بدلاً من ذلك، هي الوسائل الشائعة لتمرير المعاملات عبر ظل الأشجار هذا يجعل واصف @property خاص: من المفترض أن يعمل كإعلان نوع عمومي للمستند كيفية عمل خاصية معينة مُسمّاة. لأنّ المواقع يجب أن تتطابق مع بين أشجار الظلال، سيؤدي عدم تطابق تعريفات الخصائص إلى ظهور النتائج، لذلك تم تحديد تعريفات @property ليتم تسويتها وحلها وفقًا لترتيب المستند.

كيفية عمل القاعدة مع ::part

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

بما أنّ ::part يسمح لنطاقين على شكل شجرة بتصميم العنصر نفسه، فإن ما يلي: تحديد ترتيب تسلسلي:

1. أولاً، تحقق من النمط داخل سياق الظل. هذا هو "الافتراضي" ونمط الجزء.
2. بعد ذلك، يمكنك تطبيق النمط الخارجي كما هو موضّح في ::part. هذه هي "مخصّص" ونمط الجزء.
3. يمكنك بعد ذلك تطبيق أي نمط داخلي يتم تحديده مع !important. يتيح هذا للعنصر المخصص الإعلان عن أن خاصية معينة من الجزء غير قابل للتخصيص بواسطة ::part.

وهذا يعني أنه لا يمكن الرجوع إلى الأسماء من داخل shadow DOM ::part، لأنّ ::part هو نمط على مستوى المضيف وليس على مستوى الظل والنمط. على سبيل المثال:

// inside the shadow DOM:
@keyframes fade-in {
  from { opacity: 0}
}

// This shouldn't work!
// The host style shouldn't know the name "fade-in"
::part(slider) {
  animation-name: fade-in;  
}

كيفية عمل القاعدة مع الأنماط المضمّنة

على عكس ::part، الأنماط المضمَّنة التي تحتوي على السمة style أو تلك تعيين النمط آليًا باستخدام البرنامج النصي، يتم تحديد مكان العنصر الذي تم تحديد نطاقه. هذا لأنه لتطبيق نمط على عنصر تحتاج إلى الوصول إليه مؤشر العنصر، وبالتالي إلى جذر الظل نفسه.

آلية عمل أسماء CSS وshadow DOM معًا على أرض الواقع

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

ولاختبار وتوضيح كيفية عمل هذه الميزات عمليًا، أنشأنا الصفحة التالية: https://css-names-in-the-shadow.glitch.me/. تحتوي هذه الصفحة على العديد من إطارات iframe، ويركز كل منها على أحد الميزات واختبار ستة السيناريوهات:

• مرجع خارجي إلى اسم خارجي: لا يتضمّن shadow DOM، عملك.
• إشارة خارجية إلى اسم داخلي: يجب ألا يكون هذا الإجراء مناسبًا لأن ذلك سيؤدي إلى يعني تسرب الاسم المحدد في سياق الظل.
• المرجع الداخلي للاسم الخارجي: من المفترض أن يعمل هذا الاسم، كأسماء على مستوى الشجرة. تكتسبها جذور الظلال.
• مرجع داخلي للاسم الداخلي: من المفترض أن يكون هذا مناسبًا، باعتباره اسم المراجع في نفس النطاق.
• إشارة ::part إلى الاسم الخارجي: يجب أن يكون هذا مناسبًا، كـ ::part ويتم تعريف الاسم في النطاق ذاته.
• إشارة ::part إلى الاسم الداخلي: من المفترض ألا ينجح هذا، لأنّ النطاق الخارجي يجب ألا يكتسبوا معلومات عن الأسماء المعلَنة في shadow DOM.

@keyframes

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

@property

كما هو موضح في المواصفات، سيتم تعريف أي تصريح عن @property إلى نطاق الوثيقة. ومع ذلك، في جميع المتصفحات اليوم، يمكنك فقط الإفصاح عن @property في نطاق المستند وتعريفات @property ضمن ويتم تجاهل جذور الظل.
يُرجى مراجعة المشكلة 10541.

أخطاء خاصة بالمتصفّح

لا تُظهر الميزات الأخرى سلوكًا ثابتًا عبر المتصفحات:

• تم تبسيط @font-face إلى نطاق الجذر في Safari.
• لا يسمح Chromium باكتساب قواعد @anchor-name في جذر الظل
• لم يتم تحديد النطاق @scroll-timeline-name و@view-timeline-name بشكلٍ صحيح. على ::part (في Chromium أيضًا)
• لا يسمح أي متصفّح بالتعريف عن @font-palette-values في جذور الظل.
• يمكن تحديد view-transition-class داخل جذر الظل (الانتقال نفسه خارج جذر الظل).
• يتيح Firefox لـ ::part الوصول إلى أسماء الظلال الداخلية (استعلامات الحاويات، الإطارات الرئيسية).
• لا يتعامل متصفّح Firefox وSafari مع @counter-style في جذر الظل.

يُرجى ملاحظة أنّ counter-reset وcounter-set وcounter-increment تتضمّنان تغييرات طفيفة قواعد مختلفة لأنها أسماء ضمنية وتُعلِن عن خصائص CSS مجموعة من القواعد راسخة ومُختبَرة جيدًا.

الخاتمة

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