سلام به همه شما توسعه دهندگان فوق العاده! در این پست قصد داریم کاربرد آن را بررسی کنیم :has() در پروژه وب بعدی شما :has() نسبتاً جدید است اما با ارائه کنترل بر عناصر مختلف در UI شما در جامعه جلویی محبوبیت پیدا کرده است. بیایید نگاهی بیندازیم که کلاس شبه چیست و چگونه می توانیم از آن استفاده کنیم.

نحو

La :has() اگر هر یک از مواردی که در داخل آن جستجو می کنیم پیدا شود و در آن حساب شود، کلاس شبه CSS به استایل دادن به یک عنصر کمک می کند. مثل این است که بگوییم "اگر چیز خاصی در داخل این جعبه وجود دارد، آن را به این شکل و فقط به این شکل به جعبه بدهید."

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

«کارکردی :has() شبه کلاس CSS عنصری را نشان می دهد که هر یک از انتخابگرهای نسبی که به عنوان آرگومان ارسال می شوند، حداقل با یک عنصر در هنگام لنگر انداختن با این عنصر مطابقت داشته باشند. این شبه کلاس راهی برای انتخاب یک عنصر والد یا یک عنصر خواهر و برادر قبلی با توجه به یک عنصر مرجع با در نظر گرفتن یک فهرست انتخابگر نسبی به عنوان آرگومان ارائه می‌کند.

برای توضیح قوی تر، DND آن را کاملاً انجام می دهد

مشکل استایلینگ

در سال‌های گذشته هیچ راهی برای استایل دادن به یک عنصر والد بر اساس فرزند مستقیم آن والد با CSS یا یک عنصر مبتنی بر عنصر دیگر نداشتیم. در فرصتی که مجبور به انجام این کار بودیم، باید از جاوا اسکریپت استفاده کنیم و کلاس‌ها را بر اساس ساختار HTML روشن/خاموش کنیم. :has() آن مشکل را حل کرد

بیایید بگوییم که شما یک عنصر سطح 1 دارید (h1(h2) که مستقیماً آن را دنبال می کند. این h2 می تواند یک عنوان فرعی برای پست باشد. اگر که h2 حاضر، مهم و مستقیماً پس از آن است h1، ممکن است بخواهید آن h1 را متمایز کنید. قبل از آن مجبور بودید یک تابع JS بنویسید.

Old School Way – جاوا اسکریپت

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هایی است که دارای a هستند h2 ادامه آن، و استفاده از یک کلاس از محتوای برجسته برای ساختن h1 به عنوان یک مقاله مهم برجسته شود.

جدید و بهبود یافته با CSS مدرن که در حال ورود است! قابلیت‌های کاری که ما می‌توانیم در مرورگر انجام دهیم راه زیادی را طی کرده است. اکنون می‌توانیم از CSS برای انجام کارهایی استفاده کنیم که معمولاً باید با جاوا اسکریپت انجام دهیم، نه همه چیز، بلکه برخی چیزها.

New School Way – 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

بسیاری از اوقات ما به عنوان کارگران وب در حال دستکاری یا کار با تصاویر هستیم. ما می توانیم از ابزارهایی استفاده کنیم که ابری امکان استفاده از تبدیل‌های مختلف بر روی تصاویر را فراهم می‌کند، اما معمولاً ما می‌خواهیم سایه‌ها، شعاع حاشیه‌ها و زیرنویس‌ها را اضافه کنیم (با متن جایگزین در ویژگی alt اشتباه گرفته نشود).

مثال زیر در حال استفاده است :has() برای دیدن اینکه آیا یک شکل یا تصویر دارای عنصر figcaption است یا خیر و اگر دارد، مقداری پس‌زمینه و شعاع حاشیه را اعمال می‌کند تا تصویر برجسته شود.

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 چون نمی‌توانستم مستقیماً به آن استایل بدهم.»

این چیزی است که نیک تیلور از جانب OpenSauced باید در مورد استفاده بگویم :has().

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

آخرین باری که از آن استفاده کردم، در حال ساختن عملکرد صفحه کلید در نمای درختی بودم، بنابراین باید حالت ها و کلاس های عناصر برادر و برادر را شناسایی می کردم، اما هنوز در فایرفاکس نبود، بنابراین باید راه حل دیگری پیدا می کردم. 🫠

ابی پرینی از جانب Nexcor Food Safety Technologies, Inc.

دیدن اینکه چگونه اعضای جامعه از CSS مدرن برای حل مشکلات دنیای واقعی استفاده می کنند و همچنین فریاد زدن به ابی که از آن به دلایل دسترسی استفاده می کنند بسیار عالی است!

چیزهایی که باید در ذهن داشته باشید

چند نکته کلیدی وجود دارد که باید در هنگام استفاده به خاطر داشته باشید :has() نقاط گلوله ارجاع شده از MDN.

• شبه کلاس ویژگی خاص ترین انتخابگر را در آرگومان خود می گیرد
• اگر :has() خود کلاس شبه در مرورگر پشتیبانی نمی شود، کل بلوک انتخابگر از کار می افتد مگر اینکه :has() در یک لیست انتخابگر بخشنده است، مانند in :is() و :where()
• La :has() شبه کلاس را نمی توان در داخل دیگری قرار داد :has() 
• عناصر شبه نیز انتخابگرهای معتبری در داخل نیستند :has() و شبه عناصر لنگر معتبر برای :has()

نتیجه

استفاده از قدرت CSS، از جمله ویژگی های پیشرفته ای مانند :has() شبه کلاس، به ما قدرت می دهد تا تجربیات وب استثنایی ایجاد کنیم. نقاط قوت CSS در آبشار و ویژگی آن نهفته است ... بهترین بخش، به ما اجازه می دهد تا از پتانسیل کامل آن استفاده کنیم. با پذیرش قابلیت‌های CSS، می‌توانیم طراحی و توسعه وب را پیش ببریم، قفل امکانات جدید را باز کنیم و رابط‌های کاربری پیشگامانه ایجاد کنیم.

لینک ها:

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• PlatoData.Network Vertical Generative Ai. به خودت قدرت بده دسترسی به اینجا.
• PlatoAiStream. هوش وب 3 دانش تقویت شده دسترسی به اینجا.
• PlatoESG. کربن ، CleanTech، انرژی، محیط، خورشیدی، مدیریت پسماند دسترسی به اینجا.
• PlatoHealth. هوش بیوتکنولوژی و آزمایشات بالینی. دسترسی به اینجا.
• منبع: https://css-tricks.com/the-power-of-has-in-css/