সেম্যান্টিক কম্পোনেন্ট অ্যাডাপ্টেশন

প্রতিটি কন্টেক্সট কী তৈরি করে বা কীভাবে প্রতিক্রিয়া জানায় তা হার্ডকোড না করেই কন্টেক্সচুয়াল ভেরিয়েশন ট্রিগার করতে স্টাইল কোয়েরি (@container style()) ব্যবহার করুন। এটি ডিজাইন সিস্টেম কাপলিং কমায় এবং এক্সটেনসিবিলিটি ও কম্পোনেন্ট এনক্যাপসুলেশন উন্নত করে।

যেমন, section.featured { --surface: featured } নিয়ম কোনও প্রসঙ্গ চিহ্নিত করতে পারে এবং ল্যান্ডিং পৃষ্ঠাও main { --surface: featured }-এর মাধ্যমে ডিফল্ট হিসেবে এটি ব্যবহার করতে পারে। তারপরে কম্পোনেন্ট --surface: featured-এ প্রতিক্রিয়া দেখানোর জন্য চালু করা হয়: একটি কার্ড প্রোমোশনাল ব্যাজ দেখায়, একটি বোতাম ডিফল্ট হিসেবে তার ফিল করা ভ্যারিয়েন্ট দেখায় এবং আরও অনেক কিছু।

স্টাইল কোয়েরি উভয় দিককে ডিকাপল করে রাখে: ফিচার করা সারফেস কখনই সেইসব এলিমেন্টের নাম উল্লেখ করে না যেগুলি সেগুলির সাথে মানিয়ে নেয় এবং কম্পোনেন্ট কখনই প্রসঙ্গটি কী তৈরি করেছে তা পরীক্ষা করে না। উভয় দিকই স্বাধীনভাবে বাড়ানো যেতে পারে — নতুন কম্পোনেন্ট, নতুন ফিচার করা সারফেস — অন্যটিকে স্পর্শ না করেই। ডিসেন্ডেন্ট সিলেক্টর (যেমন, .featured .button) ঠিক উল্টোটা করতে বাধ্য করে: সিলেক্টরকে অবশ্যই সম্পর্কের উভয় দিক এনকোড করতে হবে এবং যেকোনও একদিক পরিবর্তন হলে অবশ্যই পরিবর্তন করতে হবে।

এই নির্দেশিকা কখন ব্যবহার করবেন

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

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

সঠিক টুল বেছে নেওয়া

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

• ডিসেন্ডেন্ট সিলেক্টর (.toolbar .button): একটি নির্দিষ্ট, এককালীন সম্পর্ক যা আবার ব্যবহারযোগ্য বা এক্সটেনসিবল নয়। YAGNI প্রযোজ্য — আপনি ব্যবহার করবেন না এমন ইনডিরেকশন যোগ করবেন না।
• সাইজ কোয়েরি (@container (min-width: …)): উপলভ্য স্পেসের উপর নির্ভর করে লেআউট ও ঘনত্ব পরিবর্তন হয়, সিম্যান্টিক স্টেট অনুযায়ী নয়।
• স্টাইল কোয়েরি (@container style(…)): সিম্যান্টিক স্টেট — কোনও কম্পোনেন্টকে নির্দিষ্ট প্রসঙ্গে কীভাবে রেন্ডার, সাজানো বা উপস্থাপন করা উচিত।

প্রয়োগ সংক্রান্ত নির্দেশাবলী

1. কন্টেনারে CSS কাস্টম প্রপার্টি ব্যবহার করে সিম্যান্টিক কনটেক্সট ফ্ল্যাগ নির্ধারণ করুন।
2. স্টাইল কোয়েরির জন্য container-type সেট করবেন না; এগুলি নিকটতম পূর্বপুরুষের উপর উত্তরাধিকারসূত্রে প্রাপ্ত কাস্টম প্রপার্টি কোয়েরি করে এবং এর জন্য কোনও স্পষ্ট কন্টেনমেন্ট কনটেক্সটের প্রয়োজন হয় না।
3. বাধ্যতামূলক: ডিসেন্ডেন্ট এলিমেন্টে কন্ডিশনাল স্টাইল প্রয়োগ করতে @container style(--property: value) ব্যবহার করুন। স্টাইল কোয়েরি, যে এলিমেন্টে প্রপার্টি সেট করা আছে তার সাথে ম্যাচ করতে পারে না — শুধু তার ডিসেন্ডেন্টের সাথে ম্যাচ করতে পারে।
4. যখন সম্পর্কটি অবশ্যই এক্সটেনসিবল বা ক্রস কম্পোনেন্ট/শ্যাডো DOM বাউন্ডারি (উপরে সঠিক টুল বেছে নেওয়া দেখুন) থাকতে হবে তখন ডিসেন্ডেন্ট সিলেক্টরের পরিবর্তে স্টাইল কোয়েরি পছন্দ করুন — তবে নির্দিষ্ট, এককালীন সম্পর্কের জন্য ডিসেন্ডেন্ট সিলেক্টর রাখুন যেখানে ইনডিরেকশন কিছুই কেনে না।

প্রয়োগের উদাহরণ

/* 1. Set the context on a layout container */
.featured {
  --surface: featured; /* Semantic context flag for children */
}

/* 2. Component reacts to inherited flag */
.button {
  /* Default: Outlined informational style */
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  /* Default: Hidden — only revealed in featured surfaces */
  display: none;
}

@container style(--surface: featured) {
  .button {
    /* Automatic switch to Filled promotional style */
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    /* Reveal decorative elements only in featured context */
    display: block;
  }
}

ফলব্যাক স্ট্র্যাটেজি

কন্টেনার স্টাইল কোয়েরি ব্যাপকভাবে উপলভ্য না হওয়া পর্যন্ত, প্রোগ্রেসিভ এনহ্যান্সমেন্ট হিসেবে সেগুলিকে লেয়ার করুন: সিলেক্টর-ভিত্তিক ডিফল্ট শিপ করুন যা সব জায়গায় কাজ করে এবং স্টাইল কোয়েরি সাপোর্ট করলে এটিকে ওভাররাইড করতে দিন। কন্টেক্সট সিলেক্টরে :where() ব্যবহার করুন যাতে স্টাইল কোয়েরি (একই স্পেসিফিসিটি, সোর্স অর্ডারে পরে) অটোমেটিক জিতে যায়।

/* Default styles — work everywhere */
.button {
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  display: none;
}

/* Selector-based contextual styles — broad browser support */
:where(.featured) .button {
  background: var(--brand-accent);
  color: white;
  border: none;
}

:where(.featured) .badge {
  display: block;
}

/* Progressive enhancement: style queries override when supported */
@container style(--surface: featured) {
  .button {
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    display: block;
  }
}

সিলেক্টর ফলব্যাক, কনটেক্সচুয়াল স্টাইলিংকে ক্লাস নামের সাথে যুক্ত করে, যা কম্পোনেন্টকে তার DOM প্লেসমেন্টের সাথে যুক্ত করে। স্টাইল কোয়েরি ব্যাপকভাবে কাজ করা শুরু করলে, :where() নিয়মটি সরিয়ে দেওয়া যেতে পারে।