:has() কেস স্টাডি

Swetha Gopalakrishnan

Saurabh Rajpal

চাইল্ড এলিমেন্টের উপর ভিত্তি করে সরাসরি প্যারেন্ট এলিমেন্ট সিলেক্ট করার পদ্ধতির অভাব CSS-এ দীর্ঘদিন ধরে ছিল। বহু বছর ধরে ডেভেলপারদের পক্ষ থেকে এটি একটি প্রধান অনুরোধ ছিল। :has() সিলেক্টর, যা এখন সব প্রধান ব্রাউজার দ্বারা সমর্থিত, এই সমস্যার সমাধান করে। :has() এর আগে, স্টাইলিং হুকের জন্য প্রায়শই লম্বা সিলেক্টর চেইন করতে হতো অথবা ক্লাস যোগ করতে হতো। এখন আপনি একটি এলিমেন্টের তার ডিসেন্ডেন্টদের সাথে সম্পর্কের উপর ভিত্তি করে স্টাইল করতে পারবেন। CSS Wrapped 2023 এবং 5 CSS snippets every frontend developer should know-এ :has() সিলেক্টর সম্পর্কে আরও পড়ুন।

যদিও এই সিলেক্টরটি ছোট মনে হতে পারে, এটি বিপুল সংখ্যক ব্যবহারের সুযোগ তৈরি করতে পারে। এই নিবন্ধে এমন কিছু ব্যবহারের ক্ষেত্র দেখানো হয়েছে, যা ইকমার্স কোম্পানিগুলো :has() সিলেক্টর ব্যবহার করে উন্মোচন করেছে।

এই নিবন্ধটি যে সিরিজের অংশ, সেই সম্পূর্ণ সিরিজটি দেখুন, যেখানে আলোচনা করা হয়েছে কিভাবে ইকমার্স কোম্পানিগুলো নতুন CSS এবং UI ফিচার ব্যবহার করে তাদের ওয়েবসাইটকে আরও উন্নত করেছে।

পলিসিবাজার

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

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

কোড

:has() আপনাকে প্যারেন্ট এলিমেন্ট এবং তাদের চাইল্ড এলিমেন্টগুলোকে স্টাইল করার সুযোগ দেয়। নিচের কোডটি পরীক্ষা করে দেখে যে কোনো প্যারেন্ট কন্টেইনারে .disabled-group ক্লাস সেট করা আছে কিনা। যদি থাকে, তাহলে কার্ডটি ধূসর হয়ে যায়, এবং pointer-events none সেট করার মাধ্যমে "Add" বাটনটির ক্লিকে সাড়া দেওয়া বন্ধ করে দেওয়া হয়।

.plan-group-container:has(.disabled-group) {
  opacity: 0.5;
  filter: grayscale(100%);
}

.plan-group-container:has(.disabled-section) .button {
  pointer-events: none;
  border-color: #B5B5B5;
  color: var(--text-primary-38-color);
  background: var(--input-border-color);
}

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

কোড

প্ল্যান তুলনা করার উদাহরণে, একটি ক্লাসের উপস্থিতি পরীক্ষা করার জন্য :has() ব্যবহার করা হয়েছিল। আপনি :has(input:checked) ব্যবহার করে একটি চেকবক্সের মতো ইনপুট এলিমেন্টের অবস্থাও পরীক্ষা করতে পারেন। কুইজ দেখানো ভিজ্যুয়ালটিতে, বেগুনি ব্যানারের প্রতিটি প্রশ্ন একটি চেকবক্স। Policybazaar :has(input:checked) ব্যবহার করে পরীক্ষা করে দেখে যে প্রশ্নটির উত্তর দেওয়া হয়েছে কিনা এবং যদি উত্তর দেওয়া হয়ে থাকে, তাহলে পরবর্তী প্রশ্নে স্লাইড করার জন্য animation: quesSlideOut 0.3s 0.3s linear forwards ব্যবহার করে একটি অ্যানিমেশন চালু করে। নিচের কোডে দেখুন এটি কীভাবে কাজ করে।

.segment_banner__wrap__questions {
 position: relative;
 animation: quesSlideIn 0.3s linear forwards;
}

.segment_banner__wrap__questions:has(input:checked) {
 animation: quesSlideOut 0.3s 0.3s linear forwards;
}


@keyframes quesSlideIn {
 from {
   transform: translateX(50px);
   opacity: 0;
 }
 to {
   transform: translateX(0px);
   opacity: 1;
 }
}

@keyframes quesSlideOut {
 from {
   transform: translateX(0px);
   opacity: 1;
 }
 to {
   transform: translateX(-50px);
   opacity: 0;
 }
}

টোকোপিডিয়া

টোকোপিডিয়া প্রোডাক্ট থাম্বনেইলে ভিডিও থাকলে একটি ওভারলে ইমেজ তৈরি করার জন্য :has() ব্যবহার করেছে। যদি প্রোডাক্ট থাম্বনেইলে একটি .playIcon ক্লাস থাকে, তাহলে একটি CSS ওভারলে যোগ করা হয়। এখানে, :has() সিলেক্টরটি মূল .thumbnailWrapper ক্লাসের মধ্যে & নেস্টিং সিলেক্টরের সাথে একত্রে ব্যবহৃত হয়েছে, যা সমস্ত থাম্বনেইলে প্রযোজ্য। এটি আরও মডুলার এবং পাঠযোগ্য CSS তৈরি করে।

কোড

নিম্নলিখিত কোডটি থাম্বনেইল স্টাইল করার জন্য CSS সিলেক্টর ও কম্বিনেটর ( & এবং > ) এবং :has() এর সাথে নেস্টিং ব্যবহার করে। যেসব ব্রাউজার এটি সমর্থন করে না, তাদের জন্য ফলব্যাক হিসেবে সাধারণ অতিরিক্ত CSS ক্লাস রুল ব্যবহার করা হয়। ব্রাউজার সাপোর্ট পরীক্ষা করার জন্য @supports selector(:has(*)) রুলটিও ব্যবহার করা হয়। ফলে, ব্রাউজারের বিভিন্ন সংস্করণে সামগ্রিক অভিজ্ঞতা একই থাকে।

export const thumbnailWrapper = css`
  padding: 0;
  margin-right: 7px;
  border: none;
  outline: none;
  background: transparent;

  > div {
    width: 64px;
    height: 64px;
    overflow: hidden;
    cursor: pointer;
    border-color: ;
    position: relative;
    border: 2px solid ${NN0};
    border-radius: 8px;
    transition: border-color 0.25s;

    &.active {
      border-color: ${GN500};
    }

    @supports selector(:has(*)) {
      &:has(.playIcon) {
        &::after {
          content: '';
          display: block;
          background: rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    & > .playIcon {
      position: absolute;
      top: 25%;
      left: 25%;
      width: 50%;
      height: 50%;
      text-align: center;
      z-index: 1;
    }
  }
`;

:has() ব্যবহার করার সময় বিবেচ্য বিষয়সমূহ

আরও জটিল শর্ত তৈরি করতে :has() অন্যান্য সিলেক্টরের সাথে একত্রিত করুন। has() ফ্যামিলি সিলেক্টরের কিছু উদাহরণ দেখুন।

সম্পদ:

• সিএসএস র‍্যাপড ২০২৩
• :has(): ফ্যামিলি সিলেক্টর
• ডেমো :has()
• আপনি কি কোনো ত্রুটি জানাতে বা নতুন কোনো বৈশিষ্ট্যের জন্য অনুরোধ করতে চান? আমরা আপনার কথা শুনতে আগ্রহী !

এই সিরিজের অন্যান্য নিবন্ধগুলি দেখুন, যেখানে আলোচনা করা হয়েছে কিভাবে ইকমার্স কোম্পানিগুলো স্ক্রল-ড্রাইভেন অ্যানিমেশন, ভিউ ট্রানজিশন, পপওভার এবং কন্টেইনার কোয়েরির মতো নতুন CSS ও UI ফিচার ব্যবহার করে উপকৃত হয়েছে।

• আপনার ইকমার্স সাইটের জন্য ওয়েব ইউআই ক্যাপাবিলিটি কেন গুরুত্বপূর্ণ?
• স্ক্রোল-চালিত অ্যানিমেশন কেস স্টাডি
• ট্রানজিশন কেস স্টাডিগুলি দেখুন
• পপওভার কেস স্টাডিজ
• কন্টেইনার কোয়েরি কেস স্টাডিজ