আরে আপনি সেখানে সব বিস্ময়কর বিকাশকারী! এই পোস্টে আমরা ব্যবহার অন্বেষণ করতে যাচ্ছে :has() আপনার পরবর্তী ওয়েব প্রকল্পে। :has() তুলনামূলকভাবে নতুন কিন্তু আপনার UI-তে বিভিন্ন উপাদানের উপর নিয়ন্ত্রণ প্রদানের মাধ্যমে সামনের প্রান্তের সম্প্রদায়ে জনপ্রিয়তা অর্জন করেছে। চলুন এক নজরে দেখে নেওয়া যাক ছদ্ম শ্রেণী কি এবং কিভাবে আমরা এটি ব্যবহার করতে পারি।

বাক্য গঠন

সার্জারির :has() CSS ছদ্ম-শ্রেণি একটি উপাদানকে স্টাইল করতে সাহায্য করে যদি আমরা এটির ভিতরে যে জিনিসগুলি অনুসন্ধান করছি তার মধ্যে যেকোনটি পাওয়া যায় এবং তার জন্য হিসাব করা হয়। এটা বলার মত, "যদি এই বাক্সের ভিতরে নির্দিষ্ট কিছু থাকে, তাহলে বক্সটিকে এভাবে এবং শুধুমাত্র এইভাবে স্টাইল করুন।"

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

"কার্যকর :has() CSS ছদ্ম-শ্রেণি একটি উপাদানের প্রতিনিধিত্ব করে যদি একটি আপেক্ষিক নির্বাচকদের যে কোনো একটি যুক্তি হিসাবে পাস করা হয় অন্তত একটি উপাদানের সাথে মেলে যখন এই উপাদানটির বিরুদ্ধে নোঙ্গর করা হয়। এই ছদ্ম-শ্রেণি একটি যুক্তি হিসাবে একটি আপেক্ষিক নির্বাচক তালিকা গ্রহণ করে একটি রেফারেন্স উপাদানের সাপেক্ষে একটি অভিভাবক উপাদান বা পূর্ববর্তী ভাইবোন উপাদান নির্বাচন করার একটি উপায় উপস্থাপন করে।"

আরো জোরালো ব্যাখ্যার জন্য, এমডিএন এটা পুরোপুরি করে

স্টাইলিং সমস্যা

বিগত বছরগুলিতে আমাদের কাছে সিএসএস সহ সেই পিতামাতার সরাসরি সন্তানের উপর ভিত্তি করে বা অন্য উপাদানের উপর ভিত্তি করে একটি উপাদানের উপর ভিত্তি করে একটি অভিভাবক উপাদান স্টাইল করার কোন উপায় ছিল না। আমাদের এটি করার সুযোগে, আমাদের কিছু জাভাস্ক্রিপ্ট ব্যবহার করতে হবে এবং HTML এর কাঠামোর উপর ভিত্তি করে ক্লাস চালু/বন্ধ করতে হবে। :has() যে সমস্যা সমাধান.

ধরা যাক যে আপনার একটি শিরোনাম স্তর 1 উপাদান রয়েছে (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 এর সুবিধা নিতে পারি যা আমাদের ঐতিহ্যগতভাবে জাভাস্ক্রিপ্টের সাথে করতে হবে, সবকিছু নয়, কিছু জিনিস।

নতুন স্কুল পথ – সিএসএস

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

এটার উপর কিছু :has() নিক্ষেপ করুন!

এখন আপনি ব্যবহার করতে পারেন :has() JS ফাংশন যে একই জিনিস অর্জন. এই CSS যেকোন h1 চেক করছে এবং ব্যবহার করছে ভাইবোন সংযোজক একটি h2 জন্য পরীক্ষা করা হচ্ছে যা অবিলম্বে এটি অনুসরণ করে, এবং পাঠ্যে নীল রঙ যোগ করে। নীচে যখন একটি দম্পতি ব্যবহার ক্ষেত্রে :has() কাজে আসতে পারে।

: নির্বাচক উদাহরণ 1 আছে

এইচটিএমএল

<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>

সিএসএস

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

: নির্বাচক উদাহরণ 2 আছে

ওয়েবে কর্মী হিসেবে আমরা অনেক সময় ছবি নিয়ে কাজ করি বা হেরফের করি। আমরা যে টুল ব্যবহার করা হতে পারে মেঘঘটিত আমাদের ইমেজগুলিতে বিভিন্ন রূপান্তর ব্যবহার করার জন্য প্রদান করে, কিন্তু সাধারণত আমরা ড্রপ শ্যাডো, বর্ডার-রেডিআই এবং ক্যাপশন যোগ করতে চাই (একটি Alt অ্যাট্রিবিউটে বিকল্প পাঠ্যের সাথে বিভ্রান্ত না হওয়া)।

নীচের উদাহরণ ব্যবহার করা হয় :has() একটি চিত্র বা ছবিতে একটি চিত্রকপির উপাদান আছে কিনা তা দেখতে এবং যদি এটি থাকে তবে এটি চিত্রটিকে আলাদা করতে কিছু পটভূমি এবং একটি বর্ডার ব্যাসার্ধ প্রয়োগ করে।

এইচটিএমএল

<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>

সিএসএস

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

আমি কি পারি :has() কেন?

তুমি ইহা দেখতে পারো :has() আধুনিক ব্রাউজার জুড়ে দুর্দান্ত সমর্থন রয়েছে।

:has() কমিউনিটি!

আমার সহকর্মীরা কীভাবে ব্যবহার করছে তা দেখতে আমি টুইটারে আমার নেটওয়ার্কের কাছে পৌঁছেছি :has() তাদের দৈনন্দিন কাজের মধ্যে এবং এই সম্পর্কে তাদের বলার ছিল।

"আমার কাছে একটি উদাহরণ হল তৃতীয় পক্ষের প্যাকেজ থেকে একটি নির্দিষ্ট SVG স্টাইল করা @সসেডোপেন কারণ আমি এটি সরাসরি স্টাইল করতে পারিনি।"

এই কি নিক টেলর থেকে OpenSauced ব্যবহার সম্পর্কে বলতে হয়েছিল :has().

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

শেষবার যখন আমি এটি ব্যবহার করেছিলাম তখন আমি একটি ট্রি ভিউতে কীবোর্ড কার্যকারিতা তৈরি করছিলাম, তাই আমার ভাইবোন উপাদানগুলির স্টেট এবং ক্লাস সনাক্ত করতে হবে, কিন্তু এটি এখনও ফায়ারফক্সে ছিল না তাই আমাকে অন্য সমাধান খুঁজতে হয়েছিল। 🫠

অ্যাবে পেরিনি থেকে নেক্সকর ফুড সেফটি টেকনোলজিস, ইনক।

সমাজের সদস্যরা বাস্তব জগতের সমস্যা সমাধানের জন্য কীভাবে আধুনিক CSS ব্যবহার করছে তা দেখতে খুবই ভালো লাগছে, এবং অ্যাবেইকে এটি ব্যবহার করে অ্যাকসেসিবিলিটি কারণে চিৎকার করা হচ্ছে!

জিনিষ মনে রাখা

ব্যবহার করার সময় মনে রাখতে কয়েকটি মূল পয়েন্ট রয়েছে :has() থেকে উল্লেখ করা বুলেট পয়েন্ট MDN

• ছদ্ম-শ্রেণী তার যুক্তিতে সবচেয়ে নির্দিষ্ট নির্বাচকের নির্দিষ্টতা গ্রহণ করে
• যদি :has() সিউডো-ক্লাস নিজেই একটি ব্রাউজারে সমর্থিত নয়, সম্পূর্ণ নির্বাচক ব্লক ব্যর্থ হবে যদি না :has() একটি ক্ষমাশীল নির্বাচক তালিকায় আছে, যেমন ইন :is() এবং :where()
• সার্জারির :has() ছদ্ম-শ্রেণী অন্যের মধ্যে নেস্ট করা যাবে না :has() 
• ছদ্ম-উপাদানগুলিও এর মধ্যে বৈধ নির্বাচক নয় :has() এবং ছদ্ম-উপাদানের জন্য বৈধ অ্যাঙ্কর নয় :has()

উপসংহার

CSS এর শক্তি ব্যবহার করা, এর মত উন্নত বৈশিষ্ট্য সহ :has() ছদ্ম-শ্রেণি, আমাদেরকে ব্যতিক্রমী ওয়েব অভিজ্ঞতা তৈরি করার ক্ষমতা দেয়। CSS এর শক্তিগুলি এর ক্যাসকেড এবং নির্দিষ্টতার মধ্যে নিহিত রয়েছে...সর্বোত্তম অংশ, আমাদেরকে এর পূর্ণ সম্ভাবনাকে কাজে লাগাতে দেয়। CSS-এর ক্ষমতাকে আলিঙ্গন করে, আমরা ওয়েব ডিজাইন এবং ডেভেলপমেন্টকে এগিয়ে নিয়ে যেতে পারি, নতুন সম্ভাবনা আনলক করতে পারি এবং যুগান্তকারী ইউজার ইন্টারফেস তৈরি করতে পারি।

লিঙ্ক:

• এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
• PlatoData.Network উল্লম্ব জেনারেটিভ Ai. নিজেকে ক্ষমতায়িত করুন। এখানে প্রবেশ করুন.
• প্লেটোএআইস্ট্রিম। Web3 ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
• প্লেটোইএসজি। কার্বন, ক্লিনটেক, শক্তি, পরিবেশ সৌর, বর্জ্য ব্যবস্থাপনা. এখানে প্রবেশ করুন.
• প্লেটো হেলথ। বায়োটেক এবং ক্লিনিক্যাল ট্রায়াল ইন্টেলিজেন্স। এখানে প্রবেশ করুন.
• উত্স: https://css-tricks.com/the-power-of-has-in-css/