إستخدام :has() في CSS

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

ما هي :has()؟

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

لماذا تحتاج إلى :has()؟

قبل :has() ، كان من الصعب جدًا تنسيق عناصر HTML بناءً على محتوى أطفالها بدون استخدام JavaScript. يمكن أن توفر :has() حلولًا بسيطة لمشاكل تصميم شائعة، مثل:

• - إضافة نمط إلى عنصر القائمة إذا كان لديه عناصر فرعية
• - تغيير لون خلفية عنصر إذا كان يحتوي على رابط
• - إظهار/إخفاء عنصر إذا كان يحتوي على نص/صور معينة

كيفية استخدام :has()

استخدام :has() بسيط للغاية. فقط حدد العنصر الذي ترغب في تصميمه، واستخدم :has() مع منتقي للبحث عن أطفاله. هنا مثال:

nav li:has(ul) { 
  font-weight: bold;
}

هذا سيجعل جميع عناصر `li` داخل `nav` ذات الخط العريض إذا كانت تحتوي على عنصر `ul` فرعي (قائمة منسدلة).

يمكنك أيضًا استخدام منتقيات أكثر تعقيدًا داخل :has():

article:has(> h2) {
  padding-bottom: 2rem; 
}

هذا سيضيف مسافة أسفل لأي عنصر `article` يحتوي على عنصر `h2` كطفل مباشر.

دعم المتصفحات

حاليًا، الدعم المباشر لـ :has() محدود إلى حد ما، لكن هناك طرق لجعلها تعمل في جميع المتصفحات الحديثة:

• - تدعم بشكل مباشر: Safari 15.4+
• - تحتاج إلى مُشَغِّل: Chrome/Edge/Firefox (عبر منشّئ التجميع مثل Browserlist)
• - التراجع: ستحتاج إلى كتابة حل بديل للمتصفحات القديمة التي لا تدعم :has()

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

شارك Share Tweet Share Share Share

انقر هنا

محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام