تعديل البنية المرنة لتداخل CSS

تم تفعيل تداخل Lookahead في الإصدار 120 من Chrome.

Adam Argyle

في وقت سابق من هذا العام، شحن Chrome تداخل CSS في 112، وأصبح الآن في كل متصفح رئيسي.

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

أسماء علامات عناصر التضمين

أحد القيود الأكثر إثارة للدهشة في الإصدار الأول من تداخل 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 عادي والقيمة.

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