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

تم تفعيل تداخل ميزة "البحث عن المحتوى المستقبلي" في الإصدار 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 عادية وقيمة.

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