تم تفعيل تداخل Lookahead في Chrome 120.
في وقت سابق من هذا العام، تمكّن Chrome من توفير تداخل CSS في الإصدار 112، وأصبح متوفّرًا الآن في كل متصفّح رئيسي.
ومع ذلك، كان هناك شرط واحد صارم قد يكون غير متوقع للبنية، وقد تم سرده في المقالة الأولى ضمن أمثلة التداخل غير الصالحة. تتناول مقالة المتابعة هذه التغييرات التي تم إجراؤها في المواصفات، ومن الإصدار 120 من Chrome.
أسماء علامات العناصر المتداخلة
كان أحد القيود الأكثر إثارة للدهشة في الإصدار الأول من بنية CSS المتداخلة هو عدم القدرة على تضمين أسماء علامات العناصر المجرّدة. تمت إزالة عدم القدرة هذا، مما يجعل تداخل CSS التالي صالحًا:
.card {
h1 {
/* this is now valid! */
}
}
/* the same as */
.card {
& h1 {
/* this is now valid! */
}
}
ويصبح ذلك رائعًا حقًا عند تضمين قوائم التعريف أو غير المرتبة أو غير المرتبة:
dl {
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
ما الذي تغيّر للسماح بهذا التداخل؟
يعود هذا الفضل بشكل كبير إلى بعض النماذج التي يستكشفها مهندسو Chrome وتطوير نماذج أولية لها، بالإضافة إلى طلبات المنتدى ومجموعة عمل CSS.
كان هناك قدر لا بأس به من الشك في أنّ محلل CSS اللغوي يمكن تعليمه كيفية التفريق بين اسم العلامة (div) واسم السمة (visibility)، وذلك لأنّ المحلِّل حاليًا ليس لديه مفهوم للتطلّع إلى المستقبل. ولفهم أنّ الرمز المميّز هو خاصية، يحتاج المتصفّح إلى النظر إلى الأمام ومعرفة ما إذا كان : يتّبع الرمز المميز غير المعروف. لذلك، تم استخدام رمز & في المواصفات الأصلية للإشارة إلى المتصفّح بأنّ ما يلي تمّ دمجه، وليس سمة وقيمة CSS عادية.
ولحسن الحظ، اكتشف مهندس أنه عندما فشل المحلل اللغوي في تحليل أداة الاختيار المتداخلة كخاصية وفقًا لاجتياز الاستهلاك العادي، يمكن إعادة بدئها في وضع يفترض أداة اختيار بدلاً من خاصية. السير الذاتية للتحليل، والإقرار بالتداخل باعتباره تداخل أداة الاختيار. إنها سريعة بما يكفي وموثوقة بما يكفي لأنها تم تحديدها بما يكفي لإطلاق بناء الجملة.