أدوات اختيار الفئة الزائفة وفعالة في 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()

:where()

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

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

تجميع أدوات الاختيار

يمكن لـ :is() تنفيذ أي إجراءات بشأن التجميع، بالإضافة إلى أي شيء آخر يمكن لـ :where() فعله. ويشمل ذلك استخدامها في أي مكان في أداة الاختيار ودمجها وتكديسها. مرونة كاملة في 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()

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

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