এখন কন্টেইনার প্রশ্ন কিভাবে ব্যবহার করবেন

Philip Walton

সম্প্রতি, ক্রিস কোয়ার একটি ব্লগ পোস্ট লিখেছেন প্রশ্নটি তুলে ধরে:

এখন যেহেতু কনটেইনার প্রশ্নগুলি সমস্ত ব্রাউজার ইঞ্জিনে সমর্থিত, কেন আরও বিকাশকারীরা সেগুলি ব্যবহার করছেন না?

ক্রিসের পোস্টে অনেকগুলি সম্ভাব্য কারণের তালিকা করা হয়েছে (উদাহরণস্বরূপ, সচেতনতার অভাব, পুরানো অভ্যাসগুলি কঠিন হয়ে যায়), তবে একটি বিশেষ কারণ রয়েছে যা দাঁড়িয়েছে।

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

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

একটি বাস্তবসম্মত পন্থা

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

প্রশ্ন তখন হয়ে যায়: ফলব্যাক কতটা ব্যাপক হওয়া উচিত?

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

তবে "কার্যকারিতার মূল সেট" কী যা বেশিরভাগ বিকাশকারীরা কন্টেইনার প্রশ্নের জন্য চান? এই প্রশ্নের উত্তর দেওয়ার জন্য, বিবেচনা করুন কিভাবে বেশিরভাগ বিকাশকারীরা বর্তমানে মিডিয়া প্রশ্নের সাথে প্রতিক্রিয়াশীল সাইটগুলি তৈরি করে৷

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

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

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

পরের বিভাগটি ব্যাখ্যা করে যে এটি কীভাবে কাজ করে, একটি ধাপে ধাপে নির্দেশিকা সহ আপনাকে দেখায় যে এটি বিদ্যমান সাইটে কীভাবে প্রয়োগ করা যায়।

এটা কিভাবে কাজ করে

ধাপ 1: @media নিয়মের পরিবর্তে @container নিয়ম ব্যবহার করতে আপনার উপাদান শৈলী আপডেট করুন

এই প্রথম ধাপে, আপনার সাইটের এমন কোনো উপাদান চিহ্নিত করুন যা আপনি মনে করেন ভিউপোর্ট-ভিত্তিক সাইজিংয়ের পরিবর্তে কন্টেইনার-ভিত্তিক সাইজিং থেকে উপকৃত হবে।

এই কৌশলটি কীভাবে কাজ করে তা দেখার জন্য শুধুমাত্র একটি বা দুটি উপাদান দিয়ে শুরু করা একটি ভাল ধারণা, কিন্তু আপনি যদি আপনার 100% উপাদানগুলিকে কন্টেইনার-ভিত্তিক স্টাইলিংয়ে রূপান্তর করতে চান তবে এটিও ঠিক আছে! এই কৌশল সম্পর্কে মহান জিনিস আপনি প্রয়োজন হলে এটি ক্রমবর্ধমানভাবে গ্রহণ করতে পারেন.

আপনি যে উপাদানগুলি আপডেট করতে চান তা চিহ্নিত করার পরে, আপনাকে সেই উপাদানগুলির CSS-এর প্রতিটি @media নিয়মকে একটি @container নিয়মে পরিবর্তন করতে হবে।

এটি একটি .photo-gallery উপাদানে কীভাবে দেখতে পারে তার একটি উদাহরণ রয়েছে যা ডিফল্টরূপে, একটি একক কলাম, এবং তারপর MD এবং XL ব্রেকপয়েন্টে দুই এবং তিনটি কলামে পরিণত হওয়ার জন্য @media নিয়মগুলিকে আপডেট করতে ব্যবহার করে (যথাক্রমে) :

.photo-gallery {
  display: grid;
  grid-template-columns: 1fr;
}

/* Styles for the `MD` breakpoint */
@media (min-width: 800px) {
  .photo-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

/* Styles for the `XL` breakpoint */
@media (min-width: 1200px) {
  .photo-gallery {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@container নিয়ম ব্যবহার করার জন্য .photo-gallery উপাদান আপডেট করতে, প্রথমে CSS-এ স্ট্রিং @container দিয়ে @media স্ট্রিং প্রতিস্থাপন করুন। এই দুটি নিয়মের জন্য ব্যাকরণ যথেষ্ট সমান যে, অনেক ক্ষেত্রে, এটিই আপনার পরিবর্তন করতে হবে।

আপনার সাইটের ডিজাইনের উপর নির্ভর করে, আপনাকে আকারের অবস্থা আপডেট করতে হতে পারে, বিশেষ করে যদি আপনার সাইটের @media নিয়মগুলি বিভিন্ন ভিউপোর্ট আকারে নির্দিষ্ট উপাদানগুলির জন্য কতটা স্থান উপলব্ধ হবে সে সম্পর্কে নির্দিষ্ট অনুমান করে।

উদাহরণস্বরূপ, যদি পূর্ববর্তী উদাহরণে MD এবং XL ব্রেকপয়েন্টে .photo-gallery CSS-এর স্টাইলগুলি ধরে নেয় যে সেই ব্রেকপয়েন্টগুলিতে একটি 200 পিক্সেল-ওয়াইড সাইডবার প্রদর্শিত হবে, তাহলে @container নিয়মগুলির আকারের শর্তগুলি প্রায় 200 হতে হবে পিক্সেল কম—অনুমান করা হচ্ছে যে .photo-gallery উপাদানের জন্য "ধারক" উপাদান সাইডবার অন্তর্ভুক্ত করবে না।

সব মিলিয়ে, .photo-gallery CSS কে @media নিয়ম থেকে @container নিয়মে রূপান্তর করতে, পরিবর্তনের সম্পূর্ণ সেট নিম্নরূপ:

/* Before, using the original breakpoint sizes: */
@media (min-width: 800px) { /* ... */ }
@media (min-width: 1200px) { /* ... */ }

/* After, with the breakpoint sizes reduced by 200px: */
@container (min-width: 600px) { /* ... */ }
@container (min-width: 1000px) { /* ... */ }

নোট করুন যে আপনাকে ঘোষণা ব্লকের মধ্যে কোন শৈলী পরিবর্তন করতে হবে না, কারণ নির্দিষ্ট শৈলী কখন প্রয়োগ করা উচিত তার পরিবর্তে উপাদানটি কেমন দেখায় তা প্রতিফলিত করে।

একবার আপনি আপনার উপাদানের শৈলীগুলিকে @media নিয়মগুলি থেকে @container নিয়মে আপডেট করলে, পরবর্তী ধাপ হল আপনার কন্টেইনার উপাদানগুলি কনফিগার করা।

ধাপ 2: আপনার HTML এ কন্টেইনার উপাদান যোগ করুন

পূর্ববর্তী ধাপে উপাদান শৈলী সংজ্ঞায়িত করা হয়েছে যা একটি ধারক উপাদানের আকারের উপর ভিত্তি করে। পরবর্তী ধাপ হল আপনার পৃষ্ঠার কোন উপাদানগুলি সেই কন্টেইনার উপাদানগুলি হবে তা নির্ধারণ করা যার আকার @container নিয়মগুলি আপেক্ষিক হবে৷

আপনি CSS-এ যে কোনো উপাদানকে container-type প্রপার্টি size বা inline-size সেট করে কন্টেইনার উপাদান হিসেবে ঘোষণা করতে পারেন। যদি আপনার ধারক নিয়ম প্রস্থ-ভিত্তিক হয়, তাহলে inline-size সাধারণত আপনি যা ব্যবহার করতে চান।

নিম্নলিখিত মৌলিক HTML গঠন সহ একটি সাইট বিবেচনা করুন:

<body>
  <div class="sidebar">...</div>
  <div class="content">...</div>
</body>

এই সাইটের পাত্রে .sidebar এবং .content উপাদানগুলি তৈরি করতে, এই নিয়মটি আপনার CSS-এ যোগ করুন:

.content, .sidebar {
  container-type: inline-size;
}

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

যাইহোক, যেসব ব্রাউজার কন্টেইনার কোয়েরি সমর্থন করে না, তাদের জন্য কিছু অতিরিক্ত কাজ করতে হবে।

আপনাকে কিছু কোড যোগ করতে হবে যা শনাক্ত করে কখন কন্টেইনার উপাদানগুলির আকার পরিবর্তন হয় এবং তারপর সেই পরিবর্তনগুলির উপর ভিত্তি করে DOM আপডেট করে যাতে আপনার CSS এর সাথে যুক্ত হতে পারে।

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

নিম্নলিখিত কোডটি একটি পুনঃব্যবহারযোগ্য <responsive-container> উপাদানকে সংজ্ঞায়িত করে যা স্বয়ংক্রিয়ভাবে আকার পরিবর্তনের জন্য শোনে এবং ব্রেকপয়েন্ট ক্লাস যোগ করে যার উপর ভিত্তি করে আপনার CSS স্টাইল করতে পারে:

// A mapping of default breakpoint class names and min-width sizes.
// Redefine these (or add more) as needed based on your site's design.
const defaultBreakpoints = {SM: 400, MD: 600 LG: 800, XL: 1000};

// A resize observer that monitors size changes to all <responsive-container>
// elements and calls their `updateBreakpoints()` method with the updated size.
const ro = new ResizeObserver((entries) => {
  entries.forEach((e) => e.target.updateBreakpoints(e.contentRect));
});

class ResponsiveContainer extends HTMLElement {
  connectedCallback() {
    const bps = this.getAttribute('breakpoints');
    this.breakpoints = bps ? JSON.parse(bps) : defaultBreakpoints;
    this.name = this.getAttribute('name') || '';
    ro.observe(this);
  }
  disconnectedCallback() {
    ro.unobserve(this);
  }
  updateBreakpoints(contentRect) {
    for (const bp of Object.keys(this.breakpoints)) {
      const minWidth = this.breakpoints[bp];
      const className = this.name ? `${this.name}-${bp}` : bp;
      this.classList.toggle(className, contentRect.width >= minWidth);
    }
  }
}

self.customElements.define('responsive-container', ResponsiveContainer);

এই কোডটি একটি ResizeObserver তৈরি করে কাজ করে যা DOM-এর যেকোনো <responsive-container> উপাদানের আকার পরিবর্তনের জন্য স্বয়ংক্রিয়ভাবে শোনে। যদি আকার পরিবর্তন সংজ্ঞায়িত ব্রেকপয়েন্ট আকারের একটির সাথে মেলে, তাহলে সেই ব্রেকপয়েন্ট নামের একটি ক্লাস উপাদানটিতে যোগ করা হয় (এবং শর্তটি আর মেলে না হলে সরানো হয়)।

উদাহরণস্বরূপ, যদি <responsive-container> উপাদানটির width 600 থেকে 800 পিক্সেলের মধ্যে হয় (কোডে সেট করা ডিফল্ট ব্রেকপয়েন্ট মানের উপর ভিত্তি করে), তাহলে SM এবং MD ক্লাস যুক্ত করা হবে, এভাবে:

<responsive-container class="SM MD">...</responsive-container>

এই ক্লাসগুলি আপনাকে এমন ব্রাউজারগুলির জন্য ফলব্যাক শৈলী সংজ্ঞায়িত করতে দেয় যা কন্টেইনার কোয়েরি সমর্থন করে না ( ধাপ 3 দেখুন: আপনার CSS-এ ফলব্যাক শৈলী যোগ করুন )।

এই ধারক উপাদানটি ব্যবহার করার জন্য পূর্ববর্তী HTML কোড আপডেট করতে, এর পরিবর্তে সাইডবার এবং প্রধান বিষয়বস্তু <div> উপাদানগুলিকে <responsive-container> উপাদানে পরিবর্তন করুন:

<body>
  <responsive-container class="sidebar">...</responsive-container>
  <responsive-container class="content">...</responsive-container>
</body>

বেশিরভাগ পরিস্থিতিতে, আপনি কোনো কাস্টমাইজেশন ছাড়াই শুধুমাত্র <responsive-container> উপাদানটি ব্যবহার করতে পারেন, কিন্তু যদি আপনার এটি কাস্টমাইজ করার প্রয়োজন হয় তবে নিম্নলিখিত বিকল্পগুলি উপলব্ধ:

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

এখানে একটি উদাহরণ যা এই উভয় কনফিগারেশন বিকল্পগুলি সেট করে:

<responsive-container
  name='sidebar'
  breakpoints='{"bp4":400,"bp5":500,"bp6":600,"bp7":700,"bp8":800,"bp9":900,"bp10":1000}'>
</responsive-container>

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

if (!CSS.supports('container-type: inline-size')) {
  import('./path/to/responsive-container.js');
}

ধাপ 3: আপনার CSS এ ফলব্যাক শৈলী যোগ করুন

এই কৌশলের শেষ ধাপ হল এমন ব্রাউজারগুলির জন্য ফলব্যাক শৈলী যোগ করা যা @container নিয়মে সংজ্ঞায়িত শৈলীগুলিকে চিনতে পারে না। <responsive-container> উপাদানগুলিতে সেট করা ব্রেকপয়েন্ট ক্লাসগুলি ব্যবহার করে সেই নিয়মগুলির নকল করে এটি করুন।

আগের থেকে .photo-gallery উদাহরণের সাথে অবিরত, দুটি @container নিয়মের ফলব্যাক শৈলী এইরকম দেখতে পারে:

/* Container query styles for the `MD` breakpoint. */
@container (min-width: 600px) {
  .photo-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

/* Fallback styles for the `MD` breakpoint. */
@supports not (container-type: inline-size) {
  :where(responsive-container.MD) .photo-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

/* Container query styles for the `XL` breakpoint. */
@container (min-width: 1000px) {
  .photo-gallery {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Fallback styles for the `XL` breakpoint. */
@supports not (container-type: inline-size) {
  :where(responsive-container.XL) .photo-gallery {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

এই কোডে, প্রতিটি @container নিয়মের জন্য একটি সমতুল্য নিয়ম রয়েছে যা শর্তসাপেক্ষে <responsive-container> উপাদানের সাথে মিলছে যদি সংশ্লিষ্ট ব্রেকপয়েন্ট ক্লাস উপস্থিত থাকে।

<responsive-container> উপাদানের সাথে মেলে নির্বাচকের অংশ একটি :where() ফাংশনাল সিউডো-ক্লাস নির্বাচকের মধ্যে মোড়ানো হয়, যাতে ফলব্যাক নির্বাচকের নির্দিষ্টতাকে @container নিয়মের মধ্যে মূল নির্বাচকের নির্দিষ্টতার সমতুল্য রাখা হয়।

প্রতিটি ফলব্যাক নিয়ম একটি @supports ঘোষণায় মোড়ানো হয়। যদিও ফলব্যাক কাজ করার জন্য এটি কঠোরভাবে প্রয়োজনীয় নয়, এর মানে হল যে ব্রাউজারটি সম্পূর্ণরূপে এই নিয়মগুলি উপেক্ষা করে যদি এটি কনটেইনার প্রশ্নগুলিকে সমর্থন করে, যা সাধারণভাবে স্টাইল ম্যাচিং কর্মক্ষমতা উন্নত করতে পারে। এটি সম্ভাব্যভাবে বিল্ড টুল বা CDN গুলিকে সেই ঘোষণাগুলি ছিঁড়ে ফেলার অনুমতি দেয় যদি তারা জানে যে ব্রাউজারটি কন্টেইনার প্রশ্নগুলিকে সমর্থন করে এবং সেই ফলব্যাক শৈলীগুলির প্রয়োজন নেই৷

এই ফলব্যাক কৌশলটির প্রধান নেতিবাচক দিক হল এর জন্য আপনাকে স্টাইল ঘোষণা দুবার পুনরাবৃত্তি করতে হবে, যা ক্লান্তিকর এবং ত্রুটি প্রবণ উভয়ই। যাইহোক, আপনি যদি একটি CSS প্রিপ্রসেসর ব্যবহার করেন, তাহলে আপনি এটিকে একটি মিক্সিনে বিমূর্ত করতে পারেন যা আপনার জন্য @container নিয়ম এবং ফলব্যাক কোড উভয়ই তৈরি করে। এখানে Sass ব্যবহার করে একটি উদাহরণ:

@use 'sass:map';

$breakpoints: (
  'SM': 400px,
  'MD': 600px,
  'LG': 800px,
  'XL': 1000px,
);

@mixin breakpoint($breakpoint) {
  @container (min-width: #{map.get($breakpoints, $breakpoint)}) {
    @content();
  }
  @supports not (container-type: inline-size) {
    :where(responsive-container.#{$breakpoint}) & {
      @content();
    }
  }
}

তারপর, একবার আপনার কাছে এই মিশ্রণটি হয়ে গেলে, আপনি আসল .photo-gallery উপাদান শৈলীগুলিকে এইরকম কিছুতে আপডেট করতে পারেন, যা সম্পূর্ণরূপে অনুলিপিটি দূর করে:

.photo-gallery {
  display: grid;
  grid-template-columns: 1fr;

  @include breakpoint('MD') {
    grid-template-columns: 1fr 1fr;
  }

  @include breakpoint('XL') {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

এবং যে এটি আছে সব!

রিক্যাপ

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

1. আইডেন্টিটি কম্পোনেন্ট যা আপনি তাদের কন্টেইনারের সাথে স্টাইল করতে চান এবং @container নিয়ম ব্যবহার করতে তাদের CSS-এ @media নিয়ম আপডেট করুন। এছাড়াও (যদি আপনি ইতিমধ্যেই না থাকেন), আপনার কন্টেইনার নিয়মের আকারের শর্তগুলির সাথে মেলে ব্রেকপয়েন্ট নামের একটি সেটে মানক করুন।
2. জাভাস্ক্রিপ্ট যোগ করুন যা কাস্টম <responsive-container> উপাদানকে শক্তি দেয়, এবং তারপর <responsive-container> উপাদানটি আপনার পৃষ্ঠার যেকোন বিষয়বস্তুর এলাকায় যোগ করুন যেখানে আপনি আপনার উপাদানগুলিকে আপেক্ষিক হতে চান।
3. পুরানো ব্রাউজারগুলিকে সমর্থন করার জন্য, আপনার CSS-এ ফলব্যাক শৈলী যোগ করুন যা ব্রেকপয়েন্ট ক্লাসগুলির সাথে মেলে যা আপনার HTML-এর <responsive-container> উপাদানগুলিতে স্বয়ংক্রিয়ভাবে যুক্ত হয়। একই শৈলী দুবার লিখতে না হয় এড়াতে আদর্শভাবে একটি সিএসএস প্রিপ্রসেসর মিক্সিন ব্যবহার করুন।

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

কর্মে তা দেখে

এই সমস্ত পদক্ষেপগুলি কীভাবে একত্রিত হয় তা বোঝার সম্ভবত সর্বোত্তম উপায় হল এটির একটি ডেমো কর্মক্ষেত্রে দেখা।

এই ডেমোটি 2019 সালে তৈরি করা একটি সাইটের একটি আপডেট সংস্করণ (কন্টেইনার কোয়েরি বিদ্যমান থাকার আগে) এটি ব্যাখ্যা করতে সাহায্য করে যে কেন সত্যিকারের প্রতিক্রিয়াশীল কম্পোনেন্ট লাইব্রেরি তৈরি করার জন্য কন্টেইনার কোয়েরি অপরিহার্য।

যেহেতু এই সাইটে ইতিমধ্যেই "প্রতিক্রিয়াশীল উপাদানগুলির" একটি গুচ্ছের জন্য শৈলী সংজ্ঞায়িত করা হয়েছে, তাই এটি একটি নন-তুচ্ছ সাইটে প্রবর্তিত কৌশলটি পরীক্ষা করার জন্য একটি নিখুঁত প্রার্থী ছিল৷ দেখা যাচ্ছে, এটি আপডেট করা আসলে বেশ সহজ ছিল এবং মূল সাইটের শৈলীতে প্রায় কোনও পরিবর্তনের প্রয়োজন ছিল না।

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

সীমাবদ্ধতা এবং সম্ভাব্য উন্নতি

এই পোস্টের শুরুতে উল্লিখিত হিসাবে, এখানে বর্ণিত কৌশলটি বেশিরভাগ ব্যবহারের ক্ষেত্রে ভালভাবে কাজ করে যেগুলি বিকাশকারীরা কনটেইনার প্রশ্নের জন্য পৌঁছানোর সময় আসলেই যত্ন করে।

এটি বলেছে, আরও কিছু উন্নত ব্যবহারের ক্ষেত্রে রয়েছে যা এই কৌশলটি ইচ্ছাকৃতভাবে সমর্থন করার চেষ্টা করে না, পরবর্তীতে সম্বোধন করা হয়েছে:

কন্টেইনার কোয়েরি ইউনিট

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

এটি বলেছে, যদি আপনার কন্টেইনার ক্যোয়ারী ইউনিটগুলি ব্যবহার করার প্রয়োজন হয়, আপনি কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করে সহজেই তাদের জন্য সমর্থন যোগ করতে পারেন। বিশেষত, কন্টেইনার উপাদানে ব্যবহৃত প্রতিটি ইউনিটের জন্য একটি কাস্টম সম্পত্তি সংজ্ঞায়িত করে, যেমন:

responsive-container {
  --cqw: 1cqw;
  --cqh: 1cqh;
}

এবং তারপর যখনই আপনাকে কন্টেইনার ক্যোয়ারী ইউনিটগুলি অ্যাক্সেস করতে হবে, ইউনিটটি ব্যবহার না করে সেই বৈশিষ্ট্যগুলি ব্যবহার করুন:

.photo-gallery {
  font-size: calc(10 * var(--cqw));
}

তারপরে, পুরানো ব্রাউজারগুলিকে সমর্থন করার জন্য, ResizeObserver কলব্যাকের মধ্যে কন্টেইনার উপাদানগুলিতে সেই কাস্টম বৈশিষ্ট্যগুলির জন্য মানগুলি সেট করুন৷

class ResponsiveContainer extends HTMLElement {
  // ...
  updateBreakpoints(contentRect) {
    this.style.setProperty('--cqw', `${contentRect.width / 100}px`);
    this.style.setProperty('--cqh', `${contentRect.height / 100}px`);

    // ...
  }
}

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

লজিক্যাল বৈশিষ্ট্য এবং লেখার মোড সমর্থন

আপনি এই CSS উদাহরণগুলির কয়েকটিতে @container ঘোষণায় width পরিবর্তে inline-size ব্যবহার লক্ষ্য করেছেন। আপনি নতুন cqi এবং cqb ইউনিটগুলিও লক্ষ্য করেছেন (যথাক্রমে ইনলাইন এবং ব্লক আকারের জন্য)। এই নতুন বৈশিষ্ট্যগুলি সিএসএস-এর যৌক্তিক বৈশিষ্ট্য এবং মানগুলিতে স্থানান্তরকে প্রতিফলিত করে, বরং শারীরিক বা দিকনির্দেশক বৈশিষ্ট্যগুলির পরিবর্তে।

দুর্ভাগ্যবশত, রিসাইজ অবজারভারের মতো APIগুলি এখনও width এবং height মানগুলি রিপোর্ট করে, তাই যদি আপনার ডিজাইনের যৌক্তিক বৈশিষ্ট্যগুলির নমনীয়তার প্রয়োজন হয়, তাহলে আপনাকে নিজের জন্য এটি বের করতে হবে।

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

এই কারণে, সর্বোত্তম পন্থা হল <responsive-container> > উপাদানের জন্য একটি লেখার মোড সম্পত্তি গ্রহণ করা যা সাইটের মালিক প্রয়োজন অনুসারে সেট (এবং আপডেট) করতে পারেন। এটি বাস্তবায়ন করতে, আপনি পূর্ববর্তী বিভাগে দেখানো একই পদ্ধতি অনুসরণ করবেন এবং প্রয়োজন অনুসারে width এবং height অদলবদল করবেন।

নেস্টেড পাত্রে

container-name বৈশিষ্ট্য আপনাকে একটি ধারককে একটি নাম দিতে দেয়, যা আপনি একটি @container নিয়মে উল্লেখ করতে পারেন। নামযুক্ত পাত্রগুলি উপযোগী যদি আপনার কন্টেইনারগুলির মধ্যে কন্টেইনারগুলি থাকে এবং শুধুমাত্র নির্দিষ্ট পাত্রের সাথে মেলে (কেবল নিকটতম পূর্বপুরুষের পাত্রে নয়) নির্দিষ্ট নিয়মের প্রয়োজন হয়৷

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

উদাহরণস্বরূপ, এখানে দুটি <responsive-container> কন্টেইনার> উপাদান রয়েছে .photo-gallery কম্পোনেন্টটিকে মোড়ানো, কিন্তু যেহেতু বাইরের ধারকটি ভিতরের পাত্রের চেয়ে বড়, তাই তাদের বিভিন্ন ব্রেকপয়েন্ট ক্লাস যুক্ত করা হয়েছে।

<responsive-container class="SM MD LG">
  ...
  <responsive-container class="SM">
    ...
    <div class="photo-gallery">...</div class="photo-gallery">
  </responsive-container>
</responsive-container>

এই উদাহরণে, বাইরের কন্টেইনারে MD এবং LG ক্লাস .photo-gallery উপাদানের সাথে মিলে যাওয়া শৈলীর নিয়মগুলিকে প্রভাবিত করবে, যা কন্টেইনার প্রশ্নের আচরণের সাথে মেলে না (যেহেতু তারা শুধুমাত্র নিকটতম পূর্বপুরুষ কন্টেইনারের সাথে মেলে)।

এটি মোকাবেলা করতে, হয়:

1. নিশ্চিত করুন যে আপনি সর্বদা যে কোনো পাত্রের নাম আপনি নেস্ট করছেন এবং তারপর নিশ্চিত করুন যে সংঘর্ষ এড়াতে আপনার ব্রেকপয়েন্ট ক্লাসগুলি সেই কন্টেইনার নামের সাথে প্রিফিক্স করা হয়েছে।
2. আপনার ফলব্যাক নির্বাচকদের (যা একটু বেশি সীমাবদ্ধ) ডিসেন্ডেন্ট কম্বিনেটরের পরিবর্তে চাইল্ড কম্বিনেটর ব্যবহার করুন।

ডেমো সাইটের নেস্টেড কন্টেইনার বিভাগে নামযুক্ত কন্টেনার ব্যবহার করে কাজ করার একটি উদাহরণ রয়েছে, সাস মিক্সিন সহ এটি কোডে নামযুক্ত এবং নামহীন @container নিয়ম উভয়ের জন্য ফলব্যাক শৈলী তৈরি করতে ব্যবহার করে।

যেসব ব্রাউজার সমর্থন করে না তাদের সম্পর্কে কী :where() , কাস্টম উপাদান বা রিসাইজ অবজারভার?

যদিও এই APIগুলি তুলনামূলকভাবে নতুন বলে মনে হতে পারে, সেগুলি সবকটি ব্রাউজারে তিন বছরেরও বেশি সময় ধরে সমর্থিত, এবং এগুলি সবই বেসলাইনের অংশ ব্যাপকভাবে উপলব্ধ৷

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

তারপরেও, এই নির্দিষ্ট ব্যবহারের ক্ষেত্রে, সবচেয়ে খারাপ যেটা ঘটতে পারে তা হল আপনার ব্যবহারকারীদের খুব কম শতাংশের জন্য ফলব্যাক কাজ করবে না, যার মানে তারা কন্টেইনার আকারের জন্য অপ্টিমাইজ করা একটি দৃশ্যের পরিবর্তে ডিফল্ট ভিউ দেখতে পাবে।

সাইটের কার্যকারিতা এখনও কাজ করা উচিত, এবং এটি সত্যিই গুরুত্বপূর্ণ।

কেন শুধু একটি ধারক ক্যোয়ারী পলিফিল ব্যবহার করবেন না?

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

এই কারণে, আমরা সাধারণত Google Chrome ল্যাবসের কন্টেইনার-কোয়েরি-পলিফিল সহ প্রোডাকশনে CSS পলিফিল ব্যবহার করার পরামর্শ দিই না, যা আর রক্ষণাবেক্ষণ করা হয় না (এবং প্রাথমিকভাবে ডেমোর উদ্দেশ্যে করা হয়েছিল)।

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

আপনি এমনকি পুরানো ব্রাউজারগুলির জন্য একটি ফলব্যাক বাস্তবায়ন করতে হবে?

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

caniuse.com এর মতে, বিশ্বব্যাপী ইন্টারনেট ব্যবহারকারীদের 90% দ্বারা কন্টেইনার প্রশ্নগুলি সমর্থিত, এবং এই পোস্টটি পড়া অনেক লোকের জন্য, তাদের ব্যবহারকারী বেসের জন্য সংখ্যাটি সম্ভবত কিছুটা বেশি। তাই এটা মনে রাখা গুরুত্বপূর্ণ যে আপনার বেশিরভাগ ব্যবহারকারী আপনার UI-এর কন্টেইনার-কোয়েরি সংস্করণ দেখতে পাবে। এবং 10% ব্যবহারকারীর জন্য যা করবে না, এটি এমন নয় যে তাদের একটি ভাঙা অভিজ্ঞতা হবে। এই কৌশলটি অনুসরণ করার সময়, সবচেয়ে খারাপ ক্ষেত্রে এই ব্যবহারকারীরা কিছু উপাদানের জন্য ডিফল্ট বা "মোবাইল" লেআউট দেখতে পাবে, যা বিশ্বের শেষ নয়।

ট্রেডঅফ করার সময়, আপনার বেশিরভাগ ব্যবহারকারীর জন্য অপ্টিমাইজ করা একটি ভাল অভ্যাস—একটি সর্বনিম্ন-সাধারণ-ডিনোমিনেটর পদ্ধতিতে ডিফল্ট না করে যা সমস্ত ব্যবহারকারীকে একটি সামঞ্জস্যপূর্ণ, কিন্তু উপ-পার, অভিজ্ঞতা দেয়৷

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

উন্মুখ

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

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

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

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

আপডেট (জুলাই 2, 2024): মূলত CSS কোডের সমস্ত উদাহরণ Sass ব্যবহার করেছে (চূড়ান্ত সুপারিশের সাথে সামঞ্জস্যের জন্য)। পাঠকদের প্রতিক্রিয়ার উপর ভিত্তি করে, প্রথম কয়েকটি CSS প্লেইন CSS-এ আপডেট করা হয়েছে, এবং Sass শুধুমাত্র কোড নমুনাগুলিতে ব্যবহৃত হয় যেগুলির জন্য মিক্সিন ব্যবহার করা প্রয়োজন।