রেসপন্সিভ ডিজাইন আনলক করা: CSS কন্টেইনার কোয়েরিজের একটি বিস্তারিত গাইড

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

CSS কন্টেইনার কোয়েরিজ কী?

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

ভাবুন একটি কার্ড কম্পোনেন্টের কথা যা একটি সরু সাইডবারে বা একটি প্রশস্ত মূল কন্টেন্ট এলাকায় রাখার উপর নির্ভর করে ভিন্নভাবে প্রদর্শিত হয়। মিডিয়া কোয়েরিজের সাথে, আপনাকে স্ক্রিনের আকারের উপর ভিত্তি করে কার্ডের স্টাইলিং সামঞ্জস্য করতে হতে পারে, যা অসঙ্গতির কারণ হতে পারে। কন্টেইনার কোয়েরিজের সাথে, আপনি এমন স্টাইল সংজ্ঞায়িত করতে পারেন যা বিশেষভাবে কার্ডের কন্টেইনার একটি নির্দিষ্ট প্রস্থে পৌঁছালে প্রয়োগ হয়, যা বিভিন্ন লেআউটে একটি সামঞ্জস্যপূর্ণ এবং রেসপন্সিভ অভিজ্ঞতা নিশ্চিত করে।

কেন কন্টেইনার কোয়েরিজ ব্যবহার করবেন?

কন্টেইনার কোয়েরিজ প্রচলিত মিডিয়া কোয়েরিজের তুলনায় বেশ কিছু সুবিধা প্রদান করে:

• কম্পোনেন্ট-ভিত্তিক রেসপন্সিভনেস: কন্টেইনার কোয়েরিজ সত্যিকারের কম্পোনেন্ট-ভিত্তিক রেসপন্সিভনেস সক্ষম করে, যা পৃথক এলিমেন্টগুলোকে স্ক্রিনের আকার নির্বিশেষে তাদের স্টাইলিং স্বাধীনভাবে পরিবর্তন করতে দেয়। এটি আরও মডুলার এবং রক্ষণাবেক্ষণযোগ্য কোড তৈরি করে।
• উন্নত নমনীয়তা: আপনি আরও জটিল এবং সূক্ষ্ম লেআউট তৈরি করতে পারেন যা বিস্তৃত কন্টেইনার আকারের সাথে খাপ খাইয়ে নিতে পারে। এটি বিশেষ করে পুনঃব্যবহারযোগ্য কম্পোনেন্টগুলির জন্য উপযোগী যা বিভিন্ন প্রেক্ষাপটে ব্যবহৃত হতে পারে।
• কোড ডুপ্লিকেশন হ্রাস: ভিউপোর্টের পরিবর্তে কন্টেইনারগুলিকে টার্গেট করে, আপনি প্রায়শই আপনার লেখা CSS-এর পরিমাণ কমাতে পারেন, কারণ আপনাকে বিভিন্ন স্ক্রিন আকারের জন্য মিডিয়া কোয়েরিজ পুনরাবৃত্তি করতে হবে না।
• উন্নত ব্যবহারকারীর অভিজ্ঞতা: কন্টেইনার কোয়েরিজ নিশ্চিত করে যে এলিমেন্টগুলি সর্বদা তাদের প্রেক্ষাপটের জন্য উপযুক্ত উপায়ে প্রদর্শিত হয়, যা আরও সামঞ্জস্যপূর্ণ এবং আনন্দদায়ক ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। উদাহরণস্বরূপ, একটি ই-কমার্স সাইট সামগ্রিক স্ক্রিন রেজোলিউশন নির্বিশেষে ছোট কন্টেইনারে পণ্য তালিকা গ্রিড থেকে লিস্টে পরিবর্তন করতে পারে।

কিভাবে CSS কন্টেইনার কোয়েরিজ প্রয়োগ করবেন

CSS কন্টেইনার কোয়েরিজ প্রয়োগ করার জন্য দুটি মূল ধাপ রয়েছে: কন্টেইনার নির্ধারণ করা এবং কোয়েরি লেখা।

১. কন্টেইনার নির্ধারণ করা

প্রথমে, আপনাকে একটি এলিমেন্টকে একটি কন্টেইনার হিসেবে মনোনীত করতে হবে। এটি container-type প্রপার্টি ব্যবহার করে করা হয়। container-type-এর দুটি প্রধান ভ্যালু আছে:

• size: এই ভ্যালুটি আপনাকে কন্টেইনারের প্রস্থ এবং উচ্চতা কোয়েরি করার অনুমতি দেয়।
• inline-size: এই ভ্যালুটি আপনাকে কন্টেইনারের ইনলাইন আকার (অনুভূমিক লেখার মোডে প্রস্থ, উল্লম্ব লেখার মোডে উচ্চতা) কোয়েরি করার অনুমতি দেয়। এটি প্রায়শই রেসপন্সিভ লেআউটের জন্য সবচেয়ে দরকারী বিকল্প।

আপনি আপনার কন্টেইনারকে একটি নাম দেওয়ার জন্য container-name ব্যবহার করতে পারেন, যা আপনার কোয়েরিতে নির্দিষ্ট কন্টেইনারগুলিকে টার্গেট করার জন্য সহায়ক হতে পারে। উদাহরণস্বরূপ:

.card-container {
  container-type: inline-size;
  container-name: cardContainer;
}

এই কোডটি .card-container ক্লাস সহ এলিমেন্টটিকে একটি কন্টেইনার হিসাবে ঘোষণা করে। আমরা কন্টেইনারের প্রস্থের উপর ভিত্তি করে কোয়েরি করার অনুমতি দেওয়ার জন্য inline-size নির্দিষ্ট করছি। আমরা এটিকে cardContainer নামও দিয়েছি।

২. কন্টেইনার কোয়েরি লেখা

একবার আপনি কন্টেইনার নির্ধারণ করার পরে, আপনি @container অ্যাট-রুল ব্যবহার করে কন্টেইনার কোয়েরি লিখতে পারেন। সিনট্যাক্সটি মিডিয়া কোয়েরিজের মতোই:

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

এই কোয়েরিটি কেবল তখনই কার্লি ব্রেসের ভিতরের স্টাইলগুলি প্রয়োগ করে যখন cardContainer নামের কন্টেইনারটির সর্বনিম্ন প্রস্থ ৪০০ পিক্সেল হয়। এটি .card এলিমেন্টকে (সম্ভবত .card-container-এর একটি চাইল্ড) টার্গেট করছে এবং এর লেআউট সামঞ্জস্য করছে। যদি কন্টেইনারটি ৪০০ পিক্সেলের চেয়ে সরু হয়, তবে এই স্টাইলগুলি প্রয়োগ করা হবে না।

শর্টহ্যান্ড: আপনি যখন কন্টেইনারের নাম উল্লেখ করার প্রয়োজন বোধ করেন না, তখন আপনি `@container` নিয়মের শর্টহ্যান্ড সংস্করণটিও ব্যবহার করতে পারেন:

@container (min-width: 400px) {
  /* কন্টেইনারটি কমপক্ষে ৪০০ পিক্সেল প্রশস্ত হলে প্রয়োগ করার জন্য স্টাইল */
}

কন্টেইনার কোয়েরিজের ব্যবহারিক উদাহরণ

আসুন কিছু ব্যবহারিক উদাহরণ দেখি কিভাবে আপনি আরও রেসপন্সিভ এবং অভিযোজনযোগ্য লেআউট তৈরি করতে কন্টেইনার কোয়েরিজ ব্যবহার করতে পারেন।

উদাহরণ ১: কার্ড কম্পোনেন্ট

এই উদাহরণটি দেখায় কিভাবে একটি কার্ড কম্পোনেন্টকে তার কন্টেইনারের প্রস্থের উপর ভিত্তি করে মানিয়ে নেওয়া যায়। কন্টেইনারটি সরু হলে কার্ডটি তার বিষয়বস্তু একটি একক কলামে এবং কন্টেইনারটি প্রশস্ত হলে দুটি কলামে প্রদর্শন করবে।

HTML:

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="কার্ডের ছবি" class="card-image">
    <div class="card-content">
      <h3>কার্ডের শিরোনাম</h3>
      <p>এটি কার্ডের জন্য কিছু নমুনা বিষয়বস্তু।</p>
      <a href="#">আরও জানুন</a>
    </div>
  </div>
</div>

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

এই উদাহরণে, .card-container-কে কন্টেইনার হিসাবে ঘোষণা করা হয়েছে। যখন কন্টেইনারের প্রস্থ ৫০০ পিক্সেলের কম হয়, তখন .card একটি কলাম লেআউট ব্যবহার করবে, ছবি এবং বিষয়বস্তু উল্লম্বভাবে স্ট্যাক করবে। যখন কন্টেইনারের প্রস্থ ৫০০ পিক্সেল বা তার বেশি হয়, তখন .card একটি সারি লেআউটে স্যুইচ করবে, ছবি এবং বিষয়বস্তু পাশাপাশি প্রদর্শন করবে।

উদাহরণ ২: নেভিগেশন মেনু

এই উদাহরণটি দেখায় কিভাবে উপলব্ধ স্থানের উপর ভিত্তি করে একটি নেভিগেশন মেনু মানিয়ে নেওয়া যায়। যখন কন্টেইনারটি সরু হয়, মেনু আইটেমগুলি একটি ড্রপডাউনে প্রদর্শিত হবে। যখন কন্টেইনারটি প্রশস্ত হয়, মেনু আইটেমগুলি অনুভূমিকভাবে প্রদর্শিত হবে।

HTML:

<nav class="nav-container">
  <ul>
    <li><a href="#">হোম</a></li>
    <li><a href="#">সম্পর্কে</a></li>
    <li><a href="#">পরিষেবা</a></li>
    <li><a href="#">যোগাযোগ</a></li>
  </ul>
</nav>

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

এই উদাহরণে, .nav-container-কে কন্টেইনার হিসাবে ঘোষণা করা হয়েছে। যখন কন্টেইনারের প্রস্থ ৬০০ পিক্সেলের কম হয়, তখন মেনু আইটেমগুলি একটি উল্লম্ব তালিকা হিসাবে প্রদর্শিত হবে। যখন কন্টেইনারের প্রস্থ ৬০০ পিক্সেল বা তার বেশি হয়, তখন মেনু আইটেমগুলি ফ্লেক্সবক্স ব্যবহার করে অনুভূমিকভাবে প্রদর্শিত হবে।

উদাহরণ ৩: পণ্যের তালিকা

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

HTML:

<div class="product-listing-container">
  <div class="product-item">
    <img src="product1.jpg" alt="পণ্য ১">
    <h3>পণ্যের নাম ১</h3>
    <p class="price">$19.99</p>
  </div>
  <div class="product-item">
    <img src="product2.jpg" alt="পণ্য ২">
    <h3>পণ্যের নাম ২</h3>
    <p class="price">$24.99</p>
  </div>
</div>

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

এই CSS কোডটি প্রথমে `product-listing-container`-কে একটি কন্টেইনার হিসাবে প্রতিষ্ঠা করে। সরু কন্টেইনারের জন্য (৪০০ পিক্সেলের কম), প্রতিটি পণ্য আইটেম প্রস্থের ১০০% নেয়। কন্টেইনারটি ৪০০ পিক্সেলের বাইরে বড় হওয়ার সাথে সাথে, পণ্য আইটেমগুলি দুটি কলামে সাজানো হয়। ৭৬৮ পিক্সেলের বাইরে, পণ্য আইটেমগুলি তিনটি কলামে প্রদর্শিত হয়।

ব্রাউজার সাপোর্ট এবং পলিফিলস

কন্টেইনার কোয়েরিজের আধুনিক ব্রাউজারগুলিতে, যেমন ক্রোম, ফায়ারফক্স, সাফারি এবং এজ-এ ভাল ব্রাউজার সাপোর্ট রয়েছে। তবে, পুরানো ব্রাউজারগুলি এগুলি নেটিভভাবে সাপোর্ট নাও করতে পারে।

পুরানো ব্রাউজারগুলিকে সাপোর্ট করার জন্য, আপনি একটি পলিফিল ব্যবহার করতে পারেন। একটি জনপ্রিয় বিকল্প হল container-query-polyfill, যা npm এবং GitHub-এ পাওয়া যায়। পলিফিলগুলি অসমর্থিত ফিচারগুলির জন্য শূন্যস্থান পূরণ করে, যা আপনাকে পুরানো ব্রাউজারগুলিতেও কন্টেইনার কোয়েরিজ ব্যবহার করার অনুমতি দেয়।

কন্টেইনার কোয়েরিজ ব্যবহারের সেরা অনুশীলন

কন্টেইনার কোয়েরিজ ব্যবহার করার সময় মনে রাখার জন্য এখানে কিছু সেরা অনুশীলন রয়েছে:

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

সাধারণ ভুল এবং সেগুলি এড়ানোর উপায়

• বৃত্তাকার নির্ভরতা: কন্টেইনার কোয়েরিজের মধ্যে বৃত্তাকার নির্ভরতা তৈরি না করার বিষয়ে সতর্ক থাকুন। উদাহরণস্বরূপ, যদি কন্টেইনারের আকার কন্টেইনার কোয়েরির মধ্যে প্রয়োগ করা স্টাইল দ্বারা প্রভাবিত হয়, তবে এটি অপ্রত্যাশিত আচরণের কারণ হতে পারে।
• অতিরিক্ত-নির্দিষ্টতা: আপনার কন্টেইনার কোয়েরিতে অতিরিক্ত নির্দিষ্ট নির্বাচক ব্যবহার করা এড়িয়ে চলুন। এটি আপনার কোড রক্ষণাবেক্ষণ করা কঠিন করে তুলতে পারে এবং অন্যান্য স্টাইলের সাথে দ্বন্দ্বের কারণ হতে পারে।
• নেস্টেড কন্টেইনার উপেক্ষা করা: নেস্টেড কন্টেইনার ব্যবহার করার সময়, নিশ্চিত করুন যে আপনার কোয়েরিগুলি সঠিক কন্টেইনারকে টার্গেট করছে। বিভ্রান্তি এড়াতে আপনাকে আরও নির্দিষ্ট কন্টেইনার নাম ব্যবহার করতে হতে পারে।
• কন্টেইনার নির্ধারণ করতে ভুলে যাওয়া: একটি সাধারণ ভুল হল `container-type` ব্যবহার করে একটি এলিমেন্টকে কন্টেইনার হিসাবে ঘোষণা করতে ভুলে যাওয়া। এটি ছাড়া, কন্টেইনার কোয়েরিগুলি কাজ করবে না।

কন্টেইনার কোয়েরিজ বনাম মিডিয়া কোয়েরিজ: সঠিক টুল নির্বাচন

যদিও কন্টেইনার কোয়েরিজ উল্লেখযোগ্য সুবিধা প্রদান করে, রেসপন্সিভ ডিজাইনে মিডিয়া কোয়েরিজের এখনও তাদের স্থান রয়েছে। বিভিন্ন পরিস্থিতিতে কোন টুলটি সেরা তা সিদ্ধান্ত নিতে সাহায্য করার জন্য এখানে একটি তুলনা দেওয়া হল:

বৈশিষ্ট্য	কন্টেইনার কোয়েরিজ	মিডিয়া কোয়েরিজ
টার্গেট	কন্টেইনারের আকার	ভিউ-পোর্টের আকার
রেসপন্সিভনেস	কম্পোনেন্ট-ভিত্তিক	পৃষ্ঠা-ভিত্তিক
নমনীয়তা	উচ্চ	মাঝারি
কোড ডুপ্লিকেশন	কম	বেশি
ব্যবহারের ক্ষেত্র	পুনঃব্যবহারযোগ্য কম্পোনেন্ট, জটিল লেআউট	গ্লোবাল লেআউট সমন্বয়, মৌলিক রেসপন্সিভনেস

সাধারণভাবে, যখন আপনাকে একটি কম্পোনেন্টের স্টাইলিং তার কন্টেইনারের আকারের উপর ভিত্তি করে পরিবর্তন করতে হবে তখন কন্টেইনার কোয়েরিজ ব্যবহার করুন, এবং যখন ভিউ-পোর্টের আকারের উপর ভিত্তি করে গ্লোবাল লেআউট সমন্বয় করতে হবে তখন মিডিয়া কোয়েরিজ ব্যবহার করুন। প্রায়শই, উভয় কৌশলের সংমিশ্রণই সেরা পদ্ধতি।

কন্টেইনার কোয়েরিজের সাথে রেসপন্সিভ ডিজাইনের ভবিষ্যৎ

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

উপসংহার

CSS কন্টেইনার কোয়েরিজ রেসপন্সিভ ডিজাইন টুলকিটের একটি শক্তিশালী সংযোজন। এলিমেন্টগুলোকে তাদের কন্টেইনিং এলিমেন্টের আকারের উপর প্রতিক্রিয়া জানাতে অনুমতি দিয়ে, এটি সত্যিকারের কম্পোনেন্ট-ভিত্তিক রেসপন্সিভনেস সক্ষম করে এবং ওয়েব ডিজাইনে নতুন স্তরের নমনীয়তা এবং নির্ভুলতা উন্মোচন করে। কীভাবে কন্টেইনার কোয়েরিজ কার্যকরভাবে প্রয়োগ এবং ব্যবহার করতে হয় তা বোঝার মাধ্যমে, আপনি আরও অভিযোজনযোগ্য, রক্ষণাবেক্ষণযোগ্য এবং ব্যবহারকারী-বান্ধব ওয়েবসাইট তৈরি করতে পারেন যা সকলের জন্য একটি উন্নত অভিজ্ঞতা প্রদান করে।

রিসোর্স

• CSS Containment Module Level 3 (W3C স্পেসিফিকেশন)
• CSS Container Queries - MDN ওয়েব ডক্স
• গিটহাবে কন্টেইনার কোয়েরি পলিফিল