قوة :has() في CSS

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

بناء الجملة

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

:has(<direct-selector>) {
  /* ... */
}

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

للحصول على تفسير أكثر قوة، DND يفعل ذلك على أكمل وجه

مشكلة التصميم

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

لنفترض أن لديك عنصرًا من المستوى الأول (h1) هذا هو عنوان منشور أو شيء من هذا القبيل في صفحة قائمة المدونات، ومن ثم يكون لديك مستوى العنوان 2 (h2) الذي يتبعه مباشرة. يمكن أن يكون هذا h2 عنوانًا فرعيًا للمنشور. لو كان ذلك h2 حاضر ومهم وبعده مباشرة h1، قد ترغب في جعل هذا h1 مميزًا. قبل ذلك كان عليك كتابة دالة JS.

طريق المدرسة القديمة – جافا سكريبت

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

تبحث وظيفة JS هذه عن جميع وحدات h1 التي تحتوي على h2 المضي قدمًا وتطبيق فئة من المحتوى المميز لإنشاء h1 تبرز كمقال مهم.

جديد ومحسّن مع ظهور CSS في العصر الحديث! لقد قطعت إمكانيات ما يمكننا القيام به في المتصفح شوطا طويلا. يمكننا الآن الاستفادة من CSS للقيام بالأشياء التي كان علينا القيام بها تقليديًا باستخدام JavaScript، ليس كل شيء، ولكن بعض الأشياء.

طريقة المدرسة الجديدة – CSS

h1:has(+ h2) {
    color: blue;
}

رمي بعض :has() عليه!

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

: يحتوي على مثال المحدد 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

: يحتوي على مثال المحدد 2

في كثير من الأحيان، نحن كعاملين على الويب نتعامل مع الصور أو نتعامل معها. يمكننا أن نستخدم الأدوات التي Cloudinary يوفر الاستفادة من التحويلات المختلفة على صورنا، ولكننا عادةً ما نريد إضافة ظلال مسقطة، وحدود نصف قطرية، والتسميات التوضيحية (يجب عدم الخلط بينه وبين النص البديل في سمة بديلة).

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

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

هل استطيع :has() ذلك؟

يمكنك مشاهدة هذا :has() يحظى بدعم كبير عبر المتصفحات الحديثة.

:has() في المجتمع!

لقد تواصلت مع شبكتي على تويتر لأرى كيف يستخدم زملائي :has() في عملهم اليومي وهذا ما قالوه عنه.

"أحد الأمثلة التي لدي هو تصميم ملف SVG محدد من حزمة جهة خارجية @saucedopen لأنني لم أتمكن من تصميمه بشكل مباشر.

هذا هو ما نيك تايلور تبدأ من أوبن صوصد كان ليقوله عن استخدام :has().

svg:has(> #Mail) {
  stroke-width: 1;
}

في المرة الأخيرة التي استخدمتها فيها، كنت أقوم ببناء وظائف لوحة المفاتيح في عرض الشجرة، لذلك كنت بحاجة لاكتشاف حالات وفئات العناصر الشقيقة، ولكن لم يكن ذلك موجودًا في Firefox بعد، لذا كان عليّ العثور على حل آخر. 🫠

دير بيريني تبدأ من شركة نيككور لتقنيات سلامة الأغذية

إنه لأمر رائع أن نرى كيف يستخدم أعضاء المجتمع CSS الحديث لحل مشاكل العالم الحقيقي، وأيضًا نشيد بـ Abbey لاستخدامه لأسباب تتعلق بإمكانية الوصول!

أشياء لتأخذها بالحسبان

هناك بعض النقاط الأساسية التي يجب وضعها في الاعتبار عند الاستخدام :has() النقاط المشار إليها من MDN.

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

وفي الختام

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

الروابط:

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• PlatoData.Network Vertical Generative Ai. تمكين نفسك. الوصول هنا.
• أفلاطونايستريم. ذكاء Web3. تضخيم المعرفة. الوصول هنا.
• أفلاطون كربون، كلينتك ، الطاقة، بيئة، شمسي، إدارة المخلفات. الوصول هنا.
• أفلاطون هيلث. التكنولوجيا الحيوية وذكاء التجارب السريرية. الوصول هنا.
• المصدر https://css-tricks.com/the-power-of-has-in-css/