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

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