تداخل خدمة مقارنة الأسعار (CSS)

إحدى الميزات المفضّلة لدينا في معالج CSS الأولي أصبحت الآن مضمّنة في اللغة، وهي قواعد الأنماط المدمجة.

Adam Argyle

قبل الدمج، كان يجب الإعلان عن كل أداة اختيار بشكل صريح ومنفصل عن الأخرى. يؤدي ذلك إلى التكرار وزيادة حجم أوراق الأنماط وتجربة تأليف مشتّتة.

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

بعد الدمج، يمكن مواصلة أدوات الاختيار وتجميع قواعد الأنماط ذات الصلة بها في الداخل.

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

جرِّب ذلك في المتصفّح.

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

يمكن أن يساعد الدمج في ما يلي: - التنظيم - تقليل حجم الملف - إعادة البنية

تتوفّر ميزة الدمج بدءًا من Chrome 112، ويمكن أيضًا تجربتها في Safari Technical Preview 162.

التعرّف على ميزة "الدمج في CSS"

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

تحتوي مساحة العرض التجريبي على دوائر ومثلثات ومربعات. بعضها صغير أو متوسط أو كبير. وبعضها أزرق أو وردي أو أرجواني. وكلها داخل العنصر الحاوي .demo. في ما يلي معاينة لعناصر HTML التي ستستهدفها.

<div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  …
</div>

أمثلة على الدمج

يتيح لك الدمج في CSS تحديد أنماط لعنصر ضمن سياق أداة اختيار أخرى.

.parent {
  color: blue;

  .child {
    color: red;
  }
}

في هذا المثال، يتم دمج أداة اختيار الفئة .child الفئة ضمن أداة اختيار الفئة .parent. يعني ذلك أنّ أداة الاختيار .child المدمجة لن تنطبق إلا على العناصر التي تكون عناصر ثانوية لعناصر تتضمّن فئة .parent.

يمكن بدلاً من ذلك كتابة هذا المثال باستخدام الرمز & للإشارة بشكل صريح إلى مكان وضع الفئة الرئيسية.

.parent {
  color: blue;

  & .child {
    color: red;
  }
}

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

اختيار الدوائر

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

بدون الدمج، يكون CSS اليوم على النحو التالي:

.demo .circle {
  opacity: .25;
  filter: blur(25px);
}

باستخدام الدمج، هناك طريقتان صالحتان:

/* & is explicitly placed in front of .circle */
.demo {
  & .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

أو

/* & + " " space is added for you */
.demo {
  .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

النتيجة: تصبح جميع العناصر داخل .demo التي تتضمّن فئة .circle غير واضحة وغير مرئية تقريبًا:

اختيار أي مثلثات ومربعات

تتطلب هذه المهمة اختيار عناصر متعدّدة مدمجة، ويُعرف ذلك أيضًا باسم أداة اختيار المجموعة.

بدون الدمج، يكون CSS اليوم على النحو التالي بطريقتَين:

.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}

أو باستخدام :is()

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

باستخدام الدمج، إليك طريقتان صالحتان:

.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}

أو

.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

النتيجة : لا يتبقى سوى عناصر .circle داخل .demo:

اختيار المثلثات والدوائر الكبيرة

تتطلب هذه المهمة أداة اختيار مركّبة، حيث يجب أن يتضمّن العنصر كلتا الفئتين ليتم اختياره.

بدون الدمج، يكون CSS اليوم على النحو التالي:

.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}

أو

.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

باستخدام الدمج، إليك طريقتان صالحتان:

.demo {
  .lg.triangle,
  .lg.circle {
    opacity: .25;
    filter: blur(25px);
  }
}

أو

.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

النتيجة : يتم إخفاء جميع المثلثات والدوائر الكبيرة داخل .demo:

نصيحة احترافية بشأن أدوات الاختيار المركّبة والدمج

الرمز & مفيد هنا لأنه يوضّح بشكل صريح كيفية ربط أدوات الاختيار المدمجة. انظر إلى المثال التالي:

.demo {
  .lg {
    .triangle,
    .circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

على الرغم من أنّ هذه طريقة صالحة للدمج، لن تتطابق النتائج مع العناصر التي قد تتوقعها. السبب هو أنّه بدون & لتحديد النتيجة المطلوبة من .lg.triangle, .lg.circle المركّبة معًا، ستكون النتيجة الفعلية .lg .triangle, .lg .circle، أي أدوات اختيار العناصر التابعة.

اختيار جميع الأشكال باستثناء الأشكال الوردية

تتطلب هذه المهمة فئة زائفة وظيفية للنفي، حيث يجب ألا يتضمّن العنصر أداة الاختيار المحدّدة.

بدون الدمج، يكون CSS اليوم على النحو التالي:

.demo :not(.pink) {
  opacity: .25;
  filter: blur(25px);
}

باستخدام الدمج، إليك طريقتان صالحتان:

.demo {
  :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

أو

.demo {
  & :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

النتيجة، يتم إخفاء جميع الأشكال غير الوردية داخل .demo:

الدقة والمرونة باستخدام &

لنفترض أنّك أردت استهداف .demo باستخدام أداة الاختيار :not(). & الرمز مطلوب ل ذلك:

.demo {
  &:not() {
    ...
  }
}

يؤدي ذلك إلى دمج .demo و:not() ليصبحا .demo:not()، بدلاً من المثال السابق الذي كان يحتاج إلى .demo :not(). هذا التذكير مهم جدًا عند الرغبة في دمج تفاعل :hover.

.demo {
  &:hover {
    /* .demo:hover */
  }

  :hover {
    /* .demo :hover */
  }
}

مزيد من الأمثلة على الدمج

يحتوي مواصفات CSS للدمج على المزيد من الأمثلة. إذا كنت تريد معرفة المزيد عن البنية من خلال الأمثلة، فإنّها تغطي مجموعة كبيرة من الأمثلة الصالحة وغير الصالحة.

ستقدّم الأمثلة القليلة التالية بإيجاز ميزة الدمج في CSS لمساعدتك في فهم نطاق الإمكانات التي تقدّمها.

دمج ‎ @media

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

لتسهيل البنية، إذا كانت طلبات البحث عن الوسائط المدمجة تعدّل الأنماط لسياق أداة الاختيار الحالية فقط، يمكن استخدام بنية بسيطة.

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    font-size: 1.25rem;
  }
}

يمكن أيضًا استخدام & بشكل صريح:

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    &.large {
      font-size: 1.25rem;
    }
  }
}

يعرض هذا المثال البنية الموسّعة باستخدام &، مع استهداف بطاقات .large أيضًا لتوضيح أنّ ميزات الدمج الإضافية تواصل العمل.

مزيد من المعلومات عن دمج قواعد @.

الدمج في أي مكان

واصلت جميع الأمثلة حتى هذه النقطة أو أضافت إلى سياق سابق. يمكنك تغيير السياق أو إعادة ترتيبه بالكامل إذا لزم الأمر.

.card {
  .featured & {
    /* .featured .card */
  }
}

يمثّل الرمز & مرجعًا لكائن أداة اختيار (وليس سلسلة) ويمكن وضعه في أي مكان في أداة اختيار مدمجة. ويمكن وضعه عدة مرات:

.card {
  .featured & & & {
    /* .featured .card .card .card */
  }
}

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

أمثلة على الدمج غير الصالح

هناك بعض سيناريوهات بنية الدمج غير الصالحة وقد تفاجئك إذا كنت قد استخدمت الدمج في المعالجات الأولية.

الدمج والربط

تعتمد العديد من اصطلاحات تسمية فئات CSS على إمكانية دمج أدوات الاختيار أو إلحاقها كما لو كانت سلاسل. لا يعمل ذلك في ميزة "الدمج في CSS" لأنّ أدوات الاختيار ليست سلاسل، بل هي مراجع كائنات.

.card {
  &--header {
    /* is not equal to ".card--header" */
  }
}

يمكنك الاطّلاع على شرح أكثر تفصيلاً في المواصفات.

مثال على الدمج المعقّد

الدمج ضمن قوائم أدوات الاختيار و:is()

انظر إلى كتلة CSS التالية التي تتضمّن الدمج:

.one, #two {
  .three {
    /* some styles */
  }
}

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

لكي يعمل الغرض من الدمج، سيغلّف المتصفّح أي قائمة أدوات اختيار ليست الدمج الداخلي باستخدام :is(). يحافظ هذا التغليف على تجميع قائمة أدوات الاختيار ضمن أي سياقات من تأليف المستخدم. الأثر الجانبي لهذا التجميع، :is(.one, #two)، هو أنّه يتبنّى درجة التحديد الأعلى ضمن أدوات الاختيار داخل الأقواس. هذه هي الطريقة التي يعمل بها :is() دائمًا works، ولكن قد يكون ذلك مفاجئًا عند استخدام بنية الدمج لأنّها ليست ما تم تأليفه بالضبط. ملخّص الحيلة: يمكن أن يؤدي الدمج باستخدام أرقام التعريف وقوائم أدوات الاختيار إلى أدوات اختيار ذات درجة تحديد عالية جدًا.

لتلخيص المثال المعقّد بوضوح، سيتم تطبيق كتلة الدمج السابقة على المستند على النحو التالي:

:is(.one, #two) .three {
  /* some styles */
}

احرص على مراقبة أدوات التحقق من الأخطاء أو تعليمها التحذير عند الدمج داخل قائمة أدوات اختيار تستخدم أداة اختيار رقم تعريف، لأنّ درجة تحديد جميع عمليات الدمج داخل قائمة أدوات الاختيار هذه ستكون عالية.

الجمع بين الدمج والإعلانات

انظر إلى كتلة CSS التالية التي تتضمّن الدمج:

.card {
  color: green;
  & { color: blue; }
  color: red;
}

سيكون لون عناصر .card هو blue.

يتم نقل أي إعلانات أنماط مختلطة إلى الأعلى، كما لو تم تأليفها قبل حدوث أي عملية دمج. يمكنك الاطّلاع على مزيد من التفاصيل في المواصفات.

هناك طرق لتجنُّب ذلك. يغلّف ما يلي أنماط الألوان الثلاثة في &، ما يحافظ على ترتيب التتالي كما قد يكون المؤلف قد قصده. سيكون لون عناصر .card هو الأحمر.

.card {
  color: green;
  & { color: blue; }
  & { color: red; }
}

في الواقع، من الممارسات الجيدة تغليف أي أنماط تتبع الدمج باستخدام &.

.card {
  color: green;

  @media (prefers-color-scheme: dark) {
    color: lightgreen;
  }

  & {
    aspect-ratio: 4/3;
  }
}

رصد الميزات

هناك طريقتان رائعتان لرصد ميزة "الدمج في CSS": استخدام الدمج أو استخدام @supports للتحقق من إمكانية تحليل بنية أداة اختيار الدمج.

باستخدام الدمج:

html {
  .has-nesting {
    display: block;
  }

  .no-nesting {
    display: none;
  }
}

باستخدام @supports:

@supports (selector(&)) {
  /* nesting parsing available */
}

لدى زميلي Bramus مساحة عرض تجريبي رائعة على Codepen تعرض هذه الاستراتيجية.

تصحيح الأخطاء باستخدام "أدوات مطوّري البرامج في Chrome"

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

من المخطط أن يتضمّن Chrome 113 دعمًا إضافيًا لميزة "الدمج في CSS". تابعونا لمعرفة أي جديد عنها.

المستقبل

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

الدمج هو تحسين كبير للغة CSS. وله آثار على التأليف في كل جانب تقريبًا من الجوانب المعمارية للغة CSS. يجب استكشاف هذا التأثير الكبير وفهمه بعمق قبل أن يتم تحديد الإصدار الثاني بشكل فعّال.

كفكرة أخيرة، إليك مساحة عرض تجريبي تستخدم @scope والدمج و@layer معًا. كل ذلك مثير جدًا!