ধারক প্রশ্ন কেস স্টাডি

Swetha Gopalakrishnan

Saurabh Rajpal

কন্টেইনার কোয়েরি রেসপন্সিভ ডিজাইনের জন্য একটি অত্যন্ত ডাইনামিক এবং ফ্লেক্সিবল পদ্ধতি প্রদান করে। কন্টেইনার কোয়েরিতে @container অ্যাট-রুলটি ব্যবহৃত হয়। এটি @media সহ একটি মিডিয়া কোয়েরির মতোই কাজ করে, তবে এক্ষেত্রে @container ভিউপোর্ট এবং ইউজার এজেন্টের পরিবর্তে স্টাইলিং তথ্যের জন্য একটি প্যারেন্ট কন্টেইনারকে কোয়েরি করে।

কন্টেইনারের আকারের প্রতি সাড়া দিয়ে, কন্টেইনার কোয়েরি কম্পোনেন্টগুলোকে একটি ইন্টারফেসে তাদের অবস্থানের সাথে খাপ খাইয়ে নিতে সাহায্য করে। উদাহরণস্বরূপ, একটি কার্ড কম্পোনেন্ট যে কন্টেইনারে রাখা হয়েছে, সেই অনুযায়ী তার আকার এবং স্টাইল পরিবর্তন করতে পারে; সেটি একটি সাইডবার, হিরো সেকশন, বা পৃষ্ঠার মূল অংশের ভেতরের কোনো গ্রিড হতে পারে।

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

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

রেডবাস

redBus তাদের মোবাইল এবং ডেস্কটপ সংস্করণের জন্য আলাদা কোড রক্ষণাবেক্ষণ ও পরিবেশন করে। তাদের Things-to-do এবং cargo পেজগুলিতে কন্টেইনার কোয়েরি প্রয়োগ করার পর, তারা এই সাইটগুলির জন্য কোডটিকে একটি একক কোডবেসে একীভূত করতে সক্ষম হয়। এর ফলে সাইটগুলি রেসপন্সিভ হয় এবং ডেভেলপমেন্টের সময় সাশ্রয় হয়। নিচের উদাহরণটি cargo পেজ ব্যবহার করে এটি প্রদর্শন করে:

কোড

নিম্নলিখিত উদাহরণে, .bpdpCardWrapper হলো প্যারেন্ট কন্টেইনার, যার নাম bpdpSection ।

যদি bpdpSection কন্টেইনারটির সর্বনিম্ন প্রস্থ 744px হয়, তাহলে .bpdpCardContainer , .subTxt, .bpdpAddress দ্বারা নির্বাচিত কম্পোনেন্টগুলোর font-size ও line-height আপডেট করা হয়।

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

প্রভাব

টোকোপিডিয়া

টোকোপিডিয়ার প্রোডাক্ট ডিটেইল পেজ (পিডিপি)-এ দোকান এবং পণ্যের তথ্যের জন্য একাধিক ট্যাব থাকে। আগে, এই পেজটির লেআউট তিনটি কলামে বিভক্ত ছিল এবং ছোট স্ক্রিনের জন্য কখনও কখনও বাম দিকের পণ্যের নামটি কেটে যেত (নিচের 'আগের' ভিডিওটি দেখুন)।

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

আগে

পরে

কোড

নিম্নলিখিত কোডটি infowrapper নামের প্যারেন্ট কন্টেইনারের সাইজ কোয়েরি করে। যদি infowrapper এর সর্বোচ্চ প্রস্থ 360px হয়, তাহলে চাইল্ড কম্পোনেন্টগুলোর width , margin, এবং padding অ্যাডজাস্ট করা হয়।

` container-type inline-size এ সেট করলে প্যারেন্টের ইনলাইন-ডিরেকশন সাইজ কোয়েরি করা হয়। ইংরেজির মতো ল্যাটিন ভাষাগুলোতে, এটি হবে প্যারেন্ট কন্টেইনারের প্রস্থ, কারণ টেক্সট বাম থেকে ডানে ইনলাইনভাবে প্রবাহিত হয়।

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

কন্টেইনার কোয়েরি ব্যবহার করার সময় বিবেচ্য বিষয়সমূহ

টোকোপিডিয়া তাদের সাইটে টেক্সট এলিপসিস (text ellipsis) পর্যবেক্ষণ করতে গিয়ে এর ব্যবহারিক ক্ষেত্রটি খুঁজে পায়। এটি এমন কন্টেইনারগুলোকে নির্দেশ করত যেগুলো হয়তো খুব ছোট হওয়ার কারণে ব্যবহারকারীর জন্য বিষয়বস্তু কেটে যেত।

ইকমার্স সাইটগুলির জন্য কন্টেইনার কোয়েরির আরেকটি ভালো ব্যবহার হলো পুনঃব্যবহৃত কম্পোনেন্টগুলি খুঁজে বের করা। উদাহরণস্বরূপ, ' অ্যাড টু কার্ট' বাটনটি তার প্যারেন্ট কন্টেইনারের উপর ভিত্তি করে ভিন্নভাবে প্রদর্শিত হতে পারে (যেমন, প্রোডাক্ট কার্ডে থাকলে শুধু আইকন এবং পেজের প্রধান CTA হলে আইকনের সাথে টেক্সট)। এই বাটনটি কন্টেইনার কোয়েরির জন্য একটি ভালো বিকল্প হতে পারে।

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

সম্পদ:

• কন্টেইনার কোয়েরিগুলো স্থিতিশীল ব্রাউজারগুলোতে অন্তর্ভুক্ত হয়।
• কন্টেইনার কোয়েরি—ব্রাউজারে ডিজাইন করা
• কন্টেইনার কোয়েরি ডেমো
• ডেমো: কন্টেইনার কোয়েরি কার্ড
• ভিডিও: ওয়েব ইউআই-তে নতুন কী আছে - আই/ও ২০২৩
• আপনি কি কোনো ত্রুটি জানাতে বা নতুন কোনো বৈশিষ্ট্যের জন্য অনুরোধ করতে চান? আমরা আপনার কথা শুনতে আগ্রহী ।

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

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