স্টাইল কোয়েরি দিয়ে শুরু করা

Una Kravets

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

তবে, কন্টেইনমেন্ট স্পেকে শুধু সাইজ কোয়েরির চেয়েও বেশি কিছু অন্তর্ভুক্ত রয়েছে; এটি একটি প্যারেন্টের স্টাইল ভ্যালু কোয়েরি করার সুযোগও দেয়। ক্রোমিয়াম ১১১ থেকে, আপনি কাস্টম প্রপার্টি ভ্যালুর জন্য স্টাইল কন্টেইনমেন্ট প্রয়োগ করতে পারবেন এবং একটি কাস্টম প্রপার্টির ভ্যালু জানার জন্য প্যারেন্ট এলিমেন্টকে কোয়েরি করতে পারবেন।

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

CSS কন্টেইনমেন্ট মডিউল লেভেল ৩ স্পেক, যা সাইজ এবং স্টাইল কোয়েরি অন্তর্ভুক্ত করে, একটি প্যারেন্ট থেকে যেকোনো স্টাইল কোয়েরি করার সুযোগ দেয়, যার মধ্যে font-weight: 800 এর মতো প্রপার্টি এবং ভ্যালু পেয়ারও রয়েছে। তবে, এই ফিচারটি চালুর সময়, স্টাইল কোয়েরি বর্তমানে শুধুমাত্র CSS কাস্টম প্রপার্টি ভ্যালুর সাথেই কাজ করে। স্টাইল একত্রিত করতে এবং ডিজাইন থেকে ডেটা আলাদা করার জন্য এটি এখনও খুব দরকারি। চলুন দেখে নেওয়া যাক, CSS কাস্টম প্রপার্টির সাথে কীভাবে স্টাইল কোয়েরি ব্যবহার করতে হয়:

স্টাইল কোয়েরি দিয়ে শুরু করা

ধরা যাক আমাদের কাছে নিম্নলিখিত HTML আছে:

<ul class="card-list">
  <li class="card-container">
    <div class="card">
      ...
    </div>
  </li>
</ul>

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

সরাসরি পিতামাতাদের জিজ্ঞাসা করা

স্টাইল কোয়েরির মতো নয়, .card .card-container কে তার সরাসরি প্যারেন্টের স্টাইল কোয়েরি করতে পারার জন্য আপনাকে ` container-type বা container প্রপার্টি ব্যবহার করে কন্টেইনমেন্ট প্রয়োগ করতে হবে না। তবে, আমাদের স্টাইলগুলো (এক্ষেত্রে কাস্টম প্রপার্টি ভ্যালু) একটি কন্টেইনারে (এক্ষেত্রে .card-container ) অথবা DOM-এ থাকা সেই এলিমেন্টটিকে ধারণকারী যেকোনো এলিমেন্টে প্রয়োগ করতে হবে, যেটিকে আমরা স্টাইল করছি। আমরা যে এলিমেন্টটিকে স্টাইল করছি, সেই সরাসরি এলিমেন্টের উপর কোয়েরি করা স্টাইলগুলো প্রয়োগ করতে পারি না, কারণ এটি ইনফিনিট লুপ তৈরি করতে পারে।

সরাসরি প্যারেন্টকে কোয়েরি করতে আপনি লিখতে পারেন:

/* styling .card based on the value of --theme on .card-container */
@container style(--theme: warm) {
  .card {
    background-color: wheat;
    border-color: brown; 
    ...
  }
}

আপনি হয়তো লক্ষ্য করেছেন যে স্টাইল কোয়েরি, style() দিয়ে কোয়েরিটিকে র‍্যাপ করে। এটি সাইজের মান এবং স্টাইলের মধ্যে পার্থক্য স্পষ্ট করার জন্য করা হয়। উদাহরণস্বরূপ, আপনি কন্টেইনারের প্রস্থের জন্য একটি কোয়েরি এভাবে লিখতে পারেন: @container (min-width: 200px) { … } । এটি স্টাইল প্রয়োগ করবে যদি প্যারেন্ট কন্টেইনারটি কমপক্ষে 200px চওড়া হয়। তবে, min-width একটি CSS প্রপার্টিও হতে পারে, এবং আপনি স্টাইল কোয়েরি ব্যবহার করে min-width এর CSS মান কোয়েরি করতে পারেন। এই কারণেই পার্থক্যটি স্পষ্ট করার জন্য style() ` র‍্যাপারটি ব্যবহার করা হয়: @container style(min-width: 200px) { … } ।

অপ্রত্যক্ষ পিতামাতার স্টাইলিং

যদি আপনি সরাসরি প্যারেন্ট নয় এমন কোনো এলিমেন্টের স্টাইল কোয়েরি করতে চান, তাহলে আপনাকে সেই এলিমেন্টটিকে একটি container-name দিতে হবে। উদাহরণস্বরূপ, আমরা .card .card-list একটি container-name দিয়ে এবং স্টাইল কোয়েরিতে সেটিকে রেফারেন্স করে, .card-list এর স্টাইলের উপর ভিত্তি করে .card এ স্টাইল প্রয়োগ করতে পারি।

/* styling .card based on the value of --moreGlobalVar on .card-list */
@container cards style(--moreGlobalVar: value) {
  .card {
    ...
  }
}

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

কিন্তু বাস্তবে প্রয়োগ করলে এই সবকিছু আরও বেশি অর্থবহ মনে হয়। চলুন কিছু উদাহরণ দেখা যাক:

স্টাইল কোয়েরি বাস্তবে

স্টাইল কোয়েরি বিশেষভাবে উপযোগী হয় যখন আপনার কাছে একাধিক ভ্যারিয়েশন সহ একটি পুনঃব্যবহারযোগ্য কম্পোনেন্ট থাকে, অথবা যখন আপনার সমস্ত স্টাইলের উপর নিয়ন্ত্রণ থাকে না কিন্তু নির্দিষ্ট কিছু ক্ষেত্রে পরিবর্তন প্রয়োগ করার প্রয়োজন হয়। এই উদাহরণটি এক সেট প্রোডাক্ট কার্ড দেখাচ্ছে যেগুলো একই কার্ড কম্পোনেন্ট ব্যবহার করে। কিছু প্রোডাক্ট কার্ডে অতিরিক্ত বিবরণ/নোট থাকে, যেমন “নতুন” বা “স্টক কম”, যা --detail নামের একটি কাস্টম প্রপার্টি দ্বারা ট্রিগার হয়। এছাড়াও, যদি কোনো প্রোডাক্ট “স্টক কম”-এ থাকে, তবে এটির বর্ডার ব্যাকগ্রাউন্ডে একটি গাঢ় লাল রঙ দেখা যায়। এই ধরনের তথ্য সম্ভবত সার্ভার থেকে রেন্ডার করা হয়, এবং কার্ডগুলোতে ইনলাইন স্টাইলের মাধ্যমে এভাবে প্রয়োগ করা যেতে পারে:

 <div class="product-list">
  <div class="product-card-container" style="--detail: new">
    <div class="product-card">
      <div class="media">
        <img .../>
      <div class="comment-block"></div>
    </div>
  </div>
  <div class="meta">
    ...
  </div>
  </div>
  <div class="product-card-container" style="--detail: low-stock">
    ...
  </div>
  <div class="product-card-container">
    ...
  </div>
  ...
</div>

এই কাঠামোগত ডেটা দেওয়া থাকলে, আপনি --detail এ মান পাস করতে পারেন এবং স্টাইলগুলো প্রয়োগ করতে এই CSS কাস্টম প্রপার্টিটি ব্যবহার করতে পারেন:

@container style(--detail: new) {
  .comment-block {
    display: block;
  }
  
  .comment-block::after {
    content: 'New';
    border: 1px solid currentColor;
    background: white;
    ...
  }
}

@container style(--detail: low-stock) {
  .comment-block {
    display: block;
  }
  
  .comment-block::after {
    content: 'Low Stock';
    border: 1px solid currentColor;
    background: white;
    ...
  }
  
  .media-img {
    border: 2px solid brickred;
  }
}

উপরের কোডটি আমাদেরকে --detail: low-stock এবং --detail: new এর জন্য একটি চিপ প্রয়োগ করার সুযোগ দেয়, কিন্তু আপনি হয়তো কোড ব্লকটিতে কিছু পুনরাবৃত্তি লক্ষ্য করেছেন। বর্তমানে, @container style(--detail) ব্যবহার করে শুধুমাত্র --detail এর উপস্থিতি জানার কোনো উপায় নেই, যা স্টাইলগুলোর আরও ভালো শেয়ারিং এবং পুনরাবৃত্তি কমাতে সাহায্য করত। এই সক্ষমতাটি বর্তমানে ওয়ার্কিং গ্রুপে আলোচনার অধীনে রয়েছে।

আবহাওয়ার কার্ড

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

এই কার্ডগুলির ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট এবং আইকনগুলির স্টাইল করার জন্য, আবহাওয়ার বৈশিষ্ট্য, যেমন “মেঘলা”, “বৃষ্টি” বা “রৌদ্রোজ্জ্বল” খুঁজুন:

@container style(--sunny: true) {
  .weather-card {
    background: linear-gradient(-30deg, yellow, orange);
  }
  
  .weather-card:after {
    content: url(<data-uri-for-demo-brevity>);
    background: gold;
  }
}

এইভাবে, আপনি প্রতিটি কার্ডকে তার স্বতন্ত্র বৈশিষ্ট্যের উপর ভিত্তি করে স্টাইল করতে পারেন। তবে আপনি মিডিয়া কোয়েরির মতোই ' and কম্বিনেটর ব্যবহার করে বৈশিষ্ট্যের (কাস্টম প্রপার্টি) সংমিশ্রণের জন্যও স্টাইল করতে পারেন। উদাহরণস্বরূপ, একটি মেঘলা এবং রৌদ্রোজ্জ্বল দিন দেখতে এইরকম হবে:

@container style(--sunny: true) and style(--cloudy: true) {
    .weather-card {
      background: linear-gradient(24deg, pink, violet);
    }
  
  .weather-card:after {
      content: url(<data-uri-for-demo-brevity>);
      background: violet;
  }
}

ডিজাইন থেকে ডেটা আলাদা করা

এই দুটি ডেমোতেই, ডেটা লেয়ারকে (পেজে রেন্ডার হওয়া DOM) প্রয়োগ করা স্টাইলগুলো থেকে আলাদা করার একটি কাঠামোগত সুবিধা রয়েছে। স্টাইলগুলো কম্পোনেন্টের স্টাইলের মধ্যে সম্ভাব্য ভ্যারিয়েন্ট হিসেবে লেখা হয়, যেখানে একটি এন্ডপয়েন্ট সেই ডেটা পাঠাতে পারে যা ব্যবহার করে কম্পোনেন্টটিকে স্টাইল করা হয়। আপনি একটিমাত্র ভ্যালু ব্যবহার করতে পারেন, যেমন প্রথম ক্ষেত্রে --detail ভ্যালুটি আপডেট করা, অথবা একাধিক ভ্যারিয়েবল ব্যবহার করতে পারেন, যেমন দ্বিতীয় ক্ষেত্রে ( --rainy , --cloudy বা --sunny সেট করা)। আর সবচেয়ে ভালো দিকটি হলো, আপনি এই ভ্যালুগুলো একত্রিতও করতে পারেন; --sunny এবং --cloudy উভয়ই চেক করলে একটি আংশিক মেঘলা স্টাইল দেখানো যেতে পারে।

জাভাস্ক্রিপ্টের মাধ্যমে কাস্টম প্রপার্টির মান নির্বিঘ্নে আপডেট করা যায়, হয় DOM মডেল সেট আপ করার সময় (অর্থাৎ কোনো ফ্রেমওয়ার্কে কম্পোনেন্ট তৈরি করার সময়), অথবা যেকোনো সময় <parentElem>.style.setProperty('--myProperty', <value>) ব্যবহার করে।

এখানে একটি ডেমো দেওয়া হলো, যা মাত্র কয়েকটি কোডের লাইনে একটি বাটনের --theme আপডেট করে এবং স্টাইল কোয়েরি ও কাস্টম প্রপার্টি ( --theme ) ব্যবহার করে স্টাইল প্রয়োগ করে:

স্টাইল কোয়েরি ব্যবহার করে কার্ডটিকে স্টাইল করুন, কাস্টম প্রপার্টির মান আপডেট করতে ব্যবহৃত জাভাস্ক্রিপ্টটি হলো:

const themePicker = document.querySelector('#theme-picker')
const btnParent = document.querySelector('.btn-section');

themePicker.addEventListener('input', (e) => {
  btnParent.style.setProperty('--theme', e.target.value);
})

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