أدوات اختيار الفئة الزائفة وفعالة في CSS جديدة: :is() و:where()

ستؤدّي هذه الإضافات الصغيرة إلى بنية محدّد CSS إلى إحداث تأثير كبير.

Adam Argyle

عند كتابة CSS، قد تنتهي أحيانًا بقوائم أدوات اختيار طويلة لاستهداف عناصر متعدّدة باستخدام قواعد الأنماط نفسها. على سبيل المثال، إذا كنت تريد تلوين تعديل أي علامات <b> تم العثور عليها داخل عنصر عنوان، يمكنك كتابة ما يلي:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

بدلاً من ذلك، يمكنك استخدام السمة :is() وتحسين الوضوح مع تجنُّب استخدام أداة اختيار طويلة:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

إنّ سهولة القراءة واستخدام المحدّدات الأقصر هما جزء فقط من القيمة التي تضيفها علامتا :is() و:where() إلى CSS. في هذا المنشور، ستتعرّف على بنية وقيمة هذين المُحدِّدَين الوهميَين الوظيفيَين.

صورة لا نهائية للحالة قبل استخدام :is()

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

:is()

دعم المتصفح

• 88
• 88
• 78
• 14

المصدر

:where()

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

• 88
• 88
• 78
• 14

المصدر

التعرّف على :is() و:where()

هذه أدوات اختيار وظيفية من الفئة الزائفة، لاحظ () في النهاية والطريقة التي تبدأ بها :. يمكنك اعتبارها طلبات استدعاء دوال ديناميكية في وقت التشغيل تطابق العناصر. عند كتابة CSS، تمنحك هذه العناصر طريقة لتجميع العناصر معًا في منتصف أداة الاختيار أو بدايتها أو نهايتها. ويمكنها أيضًا تغيير التحديد، مما يمنحك القدرة على إلغاء التحديد أو زيادته.

تجميع المحدّدات

يمكن :where() تنفيذ أي إجراء يمكن :is() تنفيذه في ما يتعلّق بالتجميع. ويشمل ذلك استخدامها في أي مكان في أداة الاختيار وتداخلها وتجميعها. هي مرونة CSS الكاملة التي تعرفها وتحبها. وفي ما يلي بعض الأمثلة على ذلك:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

يوضّح كل مثال من أمثلة أدوات الاختيار أعلاه مرونة هاتين الفئتَين المزيّفتَين الوظيفتَين. للعثور على أجزاء من الرمز البرمجي التي يمكن أن تستفيد من :is() أو :where()، ابحث عن أدوات اختيار تتضمّن فواصل متعددة وتكرّر أدوات الاختيار.

استخدام أدوات اختيار بسيطة ومعقدة مع :is()

للاطّلاع على مزيد من المعلومات عن أدوات الاختيار، يمكنك الاطّلاع على وحدة أدوات الاختيار في "تعلّم CSS". في ما يلي بعض الأمثلة على أدوات الاختيار البسيطة والمعقدة للمساعدة في توضيح الإمكانية:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

عادةً، عند استخدام , لإنشاء قائمة بالمحدّدين، إذا كان أيّ من المحدّدين غير صالح، تصبح جميع المحدّدين غير صالحة ولن تتمكّن القائمة من مطابقة العناصر. وهذا يعني أنّه لا يُسمح بحدوث أي أخطاء. على الرغم من أنّ :is() و:where() يتسامحان معك، يمكنهما حلّ مشاكلك.

حتى الآن، يمكن استخدام :is() و:where() كبديلَين لبعضهما من الناحية النحوية. حان الوقت للنظر في مدى اختلافهما.

الفرق بين :is() و:where()

عندما يتعلق الأمر بالتحديد، يختلف :is() و:where() اختلافًا كبيرًا. لمزيد من المعلومات عن التحديد، يُرجى الاطّلاع على وحدة تحديد العناصر في Learn CSS.

باختصار

• ليس للدالة :where() أي خصوصية.
  يؤدي :where() إلى إنهاء جميع الخصوصية في قائمة أدوات الاختيار التي يتم تمريرها كمعلَمات وظيفية. هذه هي أول ميزة لاختيار الإعلانات من نوعها.
• تأخذ :is() دقة أهم أداة اختيار.
  تبلغ درجة دقة :is(a,div,#id) للمعرّف 100 نقطة.

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

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

مع :where()، نتوقع أن تقدّم المكتبات إصدارات بدون تحديد. قد تنتهي المنافسة بين دقة أنماط المؤلفين وأنماط المكتبة . ولن يكون هناك أيّ دقة للتنافس معها عند كتابة CSS. لقد عمل فريق CSS على ميزة التجميع هذه لفترةٍ طويلة، وهي متاحة الآن، ولكن لا تزال غير مستكشفة إلى حدٍ كبير. استمتع بإنشاء ملفّات أسلوب تنسيق أصغر وإزالة الفواصل.

صورة ماركوس وينكلر على Unsplash