M

MLOG

বাংলা

সিএসএস :has() সিলেক্টর সম্পর্কে জানুন, যা প্যারেন্ট সিলেকশনের জন্য একটি গেম-চেঞ্জার। এর ব্যবহারিক প্রয়োগ, ব্রাউজার সামঞ্জস্যতা এবং উন্নত কৌশল শিখে আপনার সিএসএস স্টাইলিংকে নতুন মাত্রা দিন।

সিএসএস :has() সিলেক্টরে দক্ষতা অর্জন: প্যারেন্ট সিলেকশনের শক্তি উন্মোচন

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

:has() সিলেক্টর কী?

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

এর প্রাথমিক সিনট্যাক্স হলো:

parent:has(child) { /* সিএসএস রুলস */ }

এটি parent এলিমেন্টকে তখনই সিলেক্ট করবে যদি এর মধ্যে অন্তত একটি child এলিমেন্ট থাকে।

:has() কেন এত গুরুত্বপূর্ণ?

ঐতিহ্যগতভাবে, চাইল্ড এলিমেন্টের উপর ভিত্তি করে প্যারেন্ট এলিমেন্ট সিলেক্ট করার ক্ষেত্রে সিএসএস-এর সীমাবদ্ধতা ছিল। এই সীমাবদ্ধতার কারণে ডাইনামিক স্টাইলিং অর্জনের জন্য প্রায়শই জটিল জাভাস্ক্রিপ্ট সমাধান বা ওয়ার্কঅ্যারাউন্ডের প্রয়োজন হতো। :has() সিলেক্টর এই громоздких পদ্ধতিগুলোর প্রয়োজনীয়তা দূর করে, যা আরও পরিষ্কার, রক্ষণাবেক্ষণযোগ্য এবং পারফরম্যান্ট সিএসএস কোড লেখার সুযোগ করে দেয়।

এখানে কয়েকটি কারণ তুলে ধরা হলো কেন :has() একটি গেম-চেঞ্জার:

:has() সিলেক্টরের বেসিক উদাহরণ

আসুন :has() সিলেক্টরের শক্তি বোঝানোর জন্য কিছু সহজ উদাহরণ দিয়ে শুরু করি।

উদাহরণ ১: একটি ইমেজের উপস্থিতির উপর ভিত্তি করে প্যারেন্ট Div-কে স্টাইল করা

ধরুন আপনি একটি <div> এলিমেন্টে একটি বর্ডার যুক্ত করতে চান শুধুমাত্র যদি এর মধ্যে একটি <img> এলিমেন্ট থাকে:

div:has(img) { border: 2px solid blue; }

এই সিএসএস রুলটি যেকোনো <div>-এ একটি নীল বর্ডার প্রয়োগ করবে যার মধ্যে অন্তত একটি <img> এলিমেন্ট আছে।

উদাহরণ ২: একটি Span-এর উপস্থিতির উপর ভিত্তি করে লিস্ট আইটেমকে স্টাইল করা

ধরা যাক, আপনার কাছে একটি আইটেমের তালিকা আছে, এবং আপনি সেই লিস্ট আইটেমটি হাইলাইট করতে চান যদি এতে একটি নির্দিষ্ট ক্লাসসহ <span> এলিমেন্ট থাকে:

li:has(span.highlight) { background-color: yellow; }

এই সিএসএস রুলটি যেকোনো <li>-এর ব্যাকগ্রাউন্ড রঙ হলুদ করে দেবে যার মধ্যে "highlight" ক্লাসসহ একটি <span> আছে।

উদাহরণ ৩: ইনপুট ভ্যালিডিটির উপর ভিত্তি করে ফর্ম লেবেলকে স্টাইল করা

আপনি :has() ব্যবহার করে একটি ফর্ম লেবেলকে স্টাইল করতে পারেন, যা তার সংশ্লিষ্ট ইনপুট ফিল্ডটি ভ্যালিড নাকি ইনভ্যালিড তার উপর ভিত্তি করে হবে (:invalid সিউডো-ক্লাসের সাথে মিলিত হয়ে):

label:has(+ input:invalid) { color: red; font-weight: bold; }

এটি লেবেলটিকে লাল এবং বোল্ড করে দেবে যদি তার ঠিক পরের ইনপুট ফিল্ডটি ইনভ্যালিড হয়।

:has() সিলেক্টরের উন্নত ব্যবহার

:has() সিলেক্টরটি অন্যান্য সিএসএস সিলেক্টর এবং সিউডো-ক্লাসের সাথে মিলিত হলে আরও শক্তিশালী হয়ে ওঠে। এখানে কিছু উন্নত ব্যবহারের উদাহরণ দেওয়া হলো:

উদাহরণ ৪: খালি এলিমেন্ট টার্গেট করা

আপনি :not() সিউডো-ক্লাসটি :has() এর সাথে ব্যবহার করে এমন এলিমেন্টকে টার্গেট করতে পারেন যেগুলোতে একটি নির্দিষ্ট চাইল্ড *নেই*। উদাহরণস্বরূপ, যে div-গুলোতে ইমেজ *নেই* সেগুলোকে স্টাইল করতে:

div:not(:has(img)) { background-color: #f0f0f0; }

এটি যেকোনো <div>-এ একটি হালকা ধূসর ব্যাকগ্রাউন্ড প্রয়োগ করবে যেখানে কোনো <img> এলিমেন্ট নেই।

উদাহরণ ৫: জটিল লেআউট তৈরি করা

:has() সিলেক্টর একটি কন্টেইনারের বিষয়বস্তুর উপর ভিত্তি করে ডাইনামিক লেআউট তৈরি করতে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি একটি গ্রিড সেলের মধ্যে একটি নির্দিষ্ট ধরণের এলিমেন্টের উপস্থিতির উপর ভিত্তি করে গ্রিডের লেআউট পরিবর্তন করতে পারেন।

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-item:has(img) { grid-column: span 2; }

এটি একটি গ্রিড আইটেমকে দুটি কলাম জুড়ে বিস্তৃত করবে যদি এতে একটি ইমেজ থাকে।

উদাহরণ ৬: ডাইনামিক ফর্ম স্টাইলিং

আপনি :has() ব্যবহার করে ফর্ম এলিমেন্টগুলিকে তাদের অবস্থার উপর ভিত্তি করে (যেমন, ফোকাসড, পূরণ করা, বা ভ্যালিড) ডাইনামিকভাবে স্টাইল করতে পারেন।

.form-group:has(input:focus) { box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); } .form-group:has(input:valid) { border-color: green; } .form-group:has(input:invalid) { border-color: red; }

ইনপুট ফোকাস করা হলে এটি একটি নীল বক্স শ্যাডো যোগ করবে, ইনপুট ভ্যালিড হলে একটি সবুজ বর্ডার এবং ইনপুট ইনভ্যালিড হলে একটি লাল বর্ডার যোগ করবে।

উদাহরণ ৭: চাইল্ড এলিমেন্টের সংখ্যার উপর ভিত্তি করে স্টাইলিং

যদিও :has() সরাসরি চাইল্ডের সংখ্যা গণনা করে না, আপনি অন্যান্য সিলেক্টর এবং সিএসএস প্রপার্টির সাথে এটি একত্রিত করে একই রকম প্রভাব অর্জন করতে পারেন। উদাহরণস্বরূপ, আপনি :only-child ব্যবহার করে একটি প্যারেন্টকে স্টাইল করতে পারেন যদি তার শুধুমাত্র একটি নির্দিষ্ট ধরণের চাইল্ড থাকে।

div:has(> p:only-child) { background-color: lightgreen; }

এটি একটি <div>-কে হালকা সবুজ ব্যাকগ্রাউন্ড দিয়ে স্টাইল করবে শুধুমাত্র যদি এর সরাসরি চাইল্ড হিসেবে একটিমাত্র <p> এলিমেন্ট থাকে।

ক্রস-ব্রাউজার সামঞ্জস্যতা এবং ফলব্যাক

২০২৩ সালের শেষের দিকে, :has() সিলেক্টরটি ক্রোম, ফায়ারফক্স, সাফারি এবং এজ সহ আধুনিক ব্রাউজারগুলিতে চমৎকার সমর্থন উপভোগ করছে। তবে, প্রোডাকশনে এটি ব্যবহার করার আগে Can I use-এ সামঞ্জস্যতা পরীক্ষা করা অত্যন্ত গুরুত্বপূর্ণ, বিশেষ করে যদি আপনাকে পুরোনো ব্রাউজার সমর্থন করতে হয়।

সামঞ্জস্যতার বিবেচনার একটি সংক্ষিপ্ত বিবরণ এখানে দেওয়া হলো:

ফলব্যাক প্রদান

যদি আপনাকে পুরোনো ব্রাউজার সমর্থন করতে হয়, তবে আপনাকে ফলব্যাক প্রদান করতে হবে। এখানে কয়েকটি কৌশল রয়েছে:

এখানে একটি ফিচার কোয়েরি ব্যবহারের উদাহরণ দেওয়া হলো:

.parent { /* সকল ব্রাউজারের জন্য বেসিক স্টাইলিং */ border: 1px solid black; } @supports selector(:has(img)) { .parent:has(img) { /* :has() সমর্থনকারী ব্রাউজারগুলির জন্য উন্নত স্টাইলিং */ border: 3px solid blue; } }

এই কোডটি সমস্ত ব্রাউজারে .parent এলিমেন্টে একটি কালো বর্ডার প্রয়োগ করবে। যে ব্রাউজারগুলো :has() সমর্থন করে, সেগুলিতে যদি .parent এলিমেন্টে একটি ইমেজ থাকে তবে এটি একটি নীল বর্ডার প্রয়োগ করবে।

পারফরম্যান্স বিবেচ্য বিষয়

যদিও :has() অনেক সুবিধা প্রদান করে, এর সম্ভাব্য পারফরম্যান্স প্রভাব বিবেচনা করা অপরিহার্য, বিশেষ করে যখন এটি ব্যাপকভাবে বা জটিল সিলেক্টরের সাথে ব্যবহৃত হয়। ব্রাউজারগুলিকে পৃষ্ঠার প্রতিটি এলিমেন্টের জন্য সিলেক্টর মূল্যায়ন করতে হয়, যা কম্পিউটেশনালি ব্যয়বহুল হতে পারে।

:has()-এর পারফরম্যান্স অপটিমাইজ করার জন্য এখানে কিছু টিপস দেওয়া হলো:

সাধারণ ভুল যা এড়িয়ে চলতে হবে

:has() সিলেক্টরের সাথে কাজ করার সময়, এমন ভুল করা সহজ যা অপ্রত্যাশিত ফলাফলের কারণ হতে পারে। এখানে কিছু সাধারণ ভুল তুলে ধরা হলো যা এড়িয়ে চলতে হবে:

:has() ব্যবহারের সেরা অনুশীলন

:has() সিলেক্টরের সুবিধাগুলো সর্বোচ্চ করতে এবং সম্ভাব্য সমস্যা এড়াতে, এই সেরা অনুশীলনগুলো অনুসরণ করুন:

বাস্তব-জগতের উদাহরণ এবং ব্যবহারের ক্ষেত্র

আসুন কিছু বাস্তব-জগতের উদাহরণ অন্বেষণ করি যেখানে :has() সিলেক্টর সাধারণ ডিজাইনের চ্যালেঞ্জ সমাধান করতে ব্যবহৃত হতে পারে।

উদাহরণ ৮: রেসপন্সিভ নেভিগেশন মেনু তৈরি করা

আপনি :has() ব্যবহার করে রেসপন্সিভ নেভিগেশন মেনু তৈরি করতে পারেন যা নির্দিষ্ট মেনু আইটেমের উপস্থিতির উপর ভিত্তি করে বিভিন্ন স্ক্রিন আকারের সাথে খাপ খাইয়ে নেয়।

এমন একটি পরিস্থিতি কল্পনা করুন যেখানে আপনি ব্যবহারকারী লগ-ইন আছেন কিনা তার উপর নির্ভর করে একটি ভিন্ন নেভিগেশন মেনু প্রদর্শন করতে চান। যদি তারা লগ-ইন থাকেন তবে আপনি প্রোফাইল এবং লগআউট অ্যাকশন দেখাতে পারেন, যদি না থাকেন তবে আপনি লগইন/রেজিস্টার দেখাতে পারেন।

nav:has(.user-profile) { /* লগ-ইন করা ব্যবহারকারীদের জন্য স্টাইল */ } nav:not(:has(.user-profile)) { /* লগ-আউট করা ব্যবহারকারীদের জন্য স্টাইল */ }

উদাহরণ ৯: কার্ড কম্পোনেন্ট স্টাইল করা

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

.card:has(img) { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

উদাহরণ ১০: ডাইনামিক থিম বাস্তবায়ন করা

আপনি :has() ব্যবহার করে ব্যবহারকারীর পছন্দ বা সিস্টেম সেটিংসের উপর ভিত্তি করে ডাইনামিক থিম বাস্তবায়ন করতে পারেন। উদাহরণস্বরূপ, ব্যবহারকারী ডার্ক মোড সক্ষম করেছেন কিনা তার উপর ভিত্তি করে আপনি পৃষ্ঠার ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে পারেন।

body:has(.dark-mode) { background-color: #333; color: #fff; }

এই উদাহরণগুলো :has() সিলেক্টরের বহুমুখিতা এবং বিস্তৃত পরিসরের ডিজাইন চ্যালেঞ্জ সমাধান করার ক্ষমতাকে চিত্রিত করে।

সিএসএস-এর ভবিষ্যৎ: এরপর কী?

:has() সিলেক্টরের প্রবর্তন সিএসএস-এর বিবর্তনে একটি গুরুত্বপূর্ণ পদক্ষেপ। এটি ডেভেলপারদের জাভাস্ক্রিপ্টের উপর কম নির্ভর করে আরও ডাইনামিক, রেসপন্সিভ এবং রক্ষণাবেক্ষণযোগ্য স্টাইলশীট তৈরি করতে সক্ষম করে। :has()-এর জন্য ব্রাউজার সমর্থন বাড়তে থাকায়, আমরা এই শক্তিশালী সিলেক্টরের আরও উদ্ভাবনী এবং সৃজনশীল ব্যবহার দেখতে পাব বলে আশা করতে পারি।

ভবিষ্যতের দিকে তাকালে, সিএসএস ওয়ার্কিং গ্রুপ অন্যান্য উত্তেজনাপূর্ণ বৈশিষ্ট্য এবং উন্নতি অন্বেষণ করছে যা সিএসএস-এর ক্ষমতা আরও প্রসারিত করবে। এর মধ্যে রয়েছে:

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

উপসংহার

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

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