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

تم تفعيل تداخل ميزة "البحث عن المحتوى المستقبلي" في الإصدار 120 من Chrome.

Adam Argyle

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

توافق المتصفّح

• 120
• 120
• 117
• 17.2

المصدر

ومع ذلك، كان هناك شرط صارم وغير متوقّع على نحوٍ محتمل لبنية الجملة، وهو مُدرَج في المقالة الأولى من أمثلة التداخل غير الصالح. ستتناول هذه المقالة اللاحقة التغييرات التي طرأت على المواصفات والتغييرات في الإصدار 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 عادية وقيمة.

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