تداخل خدمة مقارنة الأسعار (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 ويمكنك أيضًا تجربته في المعاينة الفنية 162 في Safari.

بدء استخدام تداخل 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 أيضًا. بطاقات لتوضيح ميزات التداخل الإضافية تستمر في العمل.

مزيد من المعلومات عن تضمين @rules

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

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

.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() دائمًا، ولكنه قد يمثل مفاجأة عند استخدام بنية الدمج لأنها ليست بالضبط ما تم تأليفه. تم تلخيص الحيلة؛ يمكن أن يؤدي التداخل مع المعرّفات وقوائم المحدّدات إلى استخدام محددات عالية الجودة.

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

: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 برنامجًا رائعًا للترميز يظهر فيه هذه الاستراتيجية.

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

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

يخطِّط الإصدار 113 من Chrome للحصول على دعم إضافي لتداخل CSS. تابعونا لمعرفة أي جديد عنها.

المستقبل

لا يتوفر دمج CSS إلا في الإصدار 1. سيقدم الإصدار 2 المزيد من السكر التركيبي وربما قواعد أقل لحفظها. هناك الكثير من الطلب على تحليل التداخل لكي لا تكون محدودة أو لديهم لحظات صعبة.

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

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