ডিজাইন টোকেন রিঅ্যাক্টিভিটি

ব্যাকগ্রাউন্ড ও ওভারভিউ

প্রায়শই একজন লেখককে কোনও কম্পোনেন্টের ডিজাইনে প্রাসঙ্গিক পরিবর্তন করতে হবে। ঐতিহাসিকভাবে, লেখকদের এই ধরনের পরিবর্তন প্রয়োগ করার জন্য নির্বাচক ব্যবহার করতে হবে। এর অর্থ হল, তাদের অনেক ডিজাইন টোকেন কাস্টম প্রপার্টি হিসেবে থাকতে পারলেও, উচ্চ-ক্রমের ডিজাইন টোকেন শুধুমাত্র একটি সিলেক্টর প্যাটার্ন (যেমন, ক্লাস নেম বা অ্যাট্রিবিউট কনভেনশন ব্যবহার করে) বা জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কে প্রপস/কনটেক্সট হিসেবে এনকোড করা যেতে পারে।

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

কীভাবে প্রয়োগ করতে হয়

কন্টেনার স্টাইল কোয়েরি ব্যবহার করে রিঅ্যাক্টিভ ডিজাইন টোকেন প্রয়োগ করা বেশ সহজ:

1. কন্টেনারে কাস্টম প্রপার্টি হিসেবে উচ্চ-ক্রমের ডিজাইন টোকেন সেট করুন। এটি রেজিস্টার করা কাস্টম প্রপার্টি হতে হবে না।
2. সেই কাস্টম প্রপার্টির ভ্যালু কোয়েরি করতে @container style() নিয়ম ব্যবহার করুন।
3. কন্টেনারের মধ্যে থাকা ডিসেন্ডেন্ট এলিমেন্টে উপযুক্ত স্টাইল প্রয়োগ করুন।

কিছু কিছু বিষয় মনে রাখলে ভালো:

• স্টাইল কোয়েরি দিয়ে কোয়েরি করা কন্টেনারে container-type বা container-name সেট করার প্রয়োজন নেই, তবে container-name আরও নির্দিষ্ট কোয়েরি করার অনুমতি দিতে পারে।
• কন্টেনার স্টাইল কোয়েরির মাধ্যমে কন্টেনারকে স্টাইল করা যাবে না।

উপরে উল্লেখ করা প্রয়োগের ধাপের একটি প্রাথমিক উদাহরণ নিচে দেওয়া হল।

<div class="features">
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="bugs">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

.features {
  --density: spacious;
}

.bugs {
  --density: compact;
}

@container style(--density: compact) {
  .card {
    padding: 8px;
  }
}

@container style(--density: spacious) {
  .card {
    padding: 24px;
  }
}

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

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

পরিবর্তে সিলেক্টর ব্যবহার করা হচ্ছে

মূল ফিচারের জন্য, বাছাইকারী ব্যবহার করে বিকল্প পদ্ধতি ব্যবহার করা উচিত। এই উদাহরণে, কাস্টম প্রপার্টির পরিবর্তে মার্কআপে ডেনসিটি ডিজাইন টোকেন এনকোড করতে data-density অ্যাট্রিবিউট ব্যবহার করা হয়:

<div class="features" data-density="spacious">
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="bugs" data-density="compact">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

/* This example uses `:where()` to avoid increasing specificity */
:where([data-density="compact"]) .card {
  padding: var(--card-padding-compact);
}

:where([data-density="spacious"]) .card {
  padding: var(--card-padding-spacious);
}

এই ফলব্যাক পদ্ধতির একটি প্রধান সীমাবদ্ধতা হল যে এটি data-density অ্যাট্রিবিউট সেট সহ নেস্টিং এলিমেন্টকে সাপোর্ট করে না, কারণ সিলেক্টর স্পেসিফিসিটি একই, স্টাইল নির্ধারণ করতে উপস্থিতির ক্রম ব্যবহার করা হবে (যেমন, [data-density="spacious"] সবসময় [data-density="compact"]-এর থেকে বেশি অগ্রাধিকার পাবে)।

প্রোগ্রেসিভ এনহ্যান্সমেন্ট হিসেবে স্টাইল কোয়েরি ব্যবহার করা

এটি সাজেস্ট করা হয় না, তবে আপনি যদি কোনও মূল ফিচারের জন্য প্রোগ্রেসিভ এনহ্যান্সমেন্ট হিসেবে স্টাইল কোয়েরি ব্যবহার করতে চান, তাহলে ডুপ্লিকেশন এড়াতে আপনি কিছু কাস্টম প্রপার্টি তৈরি করতে পারেন, তারপর স্টাইল কোয়েরি যোগ করতে পারেন। নির্দিষ্টতা বৃদ্ধি এড়াতে কন্টেনার এলিমেন্ট বেছে নেওয়ার সময় ফলব্যাক অ্যাপ্রোচ যাতে :where() ব্যবহার করে তা নিশ্চিত করুন।

.card {
  --card-padding-compact: 8px;
  --card-padding-spacious: 24px;
}

:where([data-density="compact"]) .card {
  padding: var(--card-padding-compact);
}

:where([data-density="spacious"]) .card {
  padding: var(--card-padding-spacious);
}

/* Use style queries as a progressive enhancement: same specificity, so order of appearance is used */

@container style(--density: compact) {
  .card {
    padding: var(--card-padding-compact);
  }
}

@container style(--density: spacious) {
  .card {
    padding: var(--card-padding-spacious);
  }
}

শুধু CSS-এর মাধ্যমে ফিচার চেক করা

কন্টেনার স্টাইল কোয়েরি চেক করার ফিচার যদি আপনার প্রয়োজন হয়, যাতে এর উপর নির্ভর করে কিছু UI শর্তসাপেক্ষে দেখানো যায়, তাহলে আপনি স্টাইল কোয়েরি ব্যবহার করে তা করতে পারেন:

:root {
  --style-queries-supported: check;
}

.density-toggle {
  display: none;
}

@container style(--style-queries-supported) {
  .density-toggle {
    display: revert;
  }
}

জাভাস্ক্রিপ্টের মাধ্যমে ফিচার চেক করা

জাভাস্ক্রিপ্টের মাধ্যমে ফিচার চেক করার ক্ষেত্রে, এটি কিছুটা জটিল কারণ কন্টেনার স্টাইল কোয়েরি যোগ করার আগে CSSContainerRule ইন্টারফেস ছিল, তাই এই উদ্দেশ্যে এটি নির্ভরযোগ্য নয়। পরিবর্তে, আপনাকে পরিচিত প্রপার্টির গণনা করা ভ্যালু চেক করতে হবে যা স্টাইল কোয়েরির মাধ্যমে সেট করা হচ্ছে।

এই উদাহরণে কাস্টম প্রপার্টি ব্যবহার করা হয়েছে কারণ এর কোনও ভিজ্যুয়াল এফেক্ট নেই:

:root {
  --style-queries-supported: check;
}

@container style(--style-queries-supported: check) {
  body {
    --style-queries-supported: yes;
  }
}

তারপর, জাভাস্ক্রিপ্টে গণনা করা ভ্যালু এইভাবে চেক করুন:

if (getComputedStyle(document.body).getPropertyValue("--style-queries-supported") === "yes") {
  // Use container style queries
} else {
  // Use fallback strategy
}