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

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

يمكن :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()

لمراجعة أدوات الاختيار، يمكنك الاطّلاع على وحدة أدوات الاختيار في 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() اختلافًا كبيرًا. لمزيد من المعلومات عن التحديد، يُرجى الاطّلاع على وحدة تحديد العناصر في 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