কনস্ট্রাক্টেবল স্টাইলশিট

নির্বিঘ্নে বারবার ব্যবহার করা যায় এমন স্টাইল।

Jason Miller

কনস্ট্রাক্টেবল স্টাইলশিট হল শ্যাডো DOM ব্যবহার করার সময় আবার ব্যবহার করা যায় এমন স্টাইল তৈরি ও ডিস্ট্রিবিউট করার একটি উপায়।

Browser Support

• 73
• 79
• 101
• 16.4

Source

জাভাস্ক্রিপ্ট ব্যবহার করে স্টাইলশিট তৈরি করা সবসময় সম্ভব হয়েছে। তবে, ঐতিহাসিকভাবে এই প্রসেসটি হল document.createElement('style') ব্যবহার করে <style> এলিমেন্ট তৈরি করা এবং তারপরে অন্তর্নিহিত CSSStyleSheet ইনস্ট্যান্সের রেফারেন্স পেতে এর শিট প্রপার্টি অ্যাক্সেস করা। এই পদ্ধতিতে ডুপ্লিকেট CSS কোড এবং তার সাথে সম্পর্কিত ব্লট তৈরি হতে পারে, এবং অ্যাটাচ করার ফলে স্টাইল না করা কন্টেন্টের ফ্ল্যাশ তৈরি হয়, ব্লট থাকুক বা না থাকুক। CSSStyleSheet ইন্টারফেস হল CSS রিপ্রেজেন্টেশন ইন্টারফেসের একটি সংগ্রহের রুট, যাকে CSSOM বলা হয়, এটি স্টাইলশিট ম্যানিপুলেট করার জন্য একটি প্রোগ্রাম্যাটিক উপায় অফার করে এবং সেইসাথে পুরানো পদ্ধতির সাথে সম্পর্কিত সমস্যাগুলি দূর করে।

Constructable Stylesheets-এর মাধ্যমে শেয়ার করা CSS স্টাইল সংজ্ঞায়িত ও প্রস্তুত করা সম্ভব হয় এবং তারপর সেইসব স্টাইল একাধিক শ্যাডো রুট বা ডকুমেন্টে সহজে ও ডুপ্লিকেট না করেই প্রয়োগ করা যায়। শেয়ার করা CSSStyleSheet-এ করা আপডেট সেইসব রুটে প্রয়োগ করা হয় যেখানে এটি অ্যাডপ্ট করা হয়েছে এবং শিট লোড হয়ে গেলে স্টাইলশিট অ্যাডপ্ট করা দ্রুত ও সিঙ্ক্রোনাস হয়।

Constructable Stylesheets-এর মাধ্যমে সেট-আপ করা অ্যাসোসিয়েশন বিভিন্ন ধরনের অ্যাপ্লিকেশনের ক্ষেত্রে ভালোভাবে কাজ করে। এটি অনেক কম্পোনেন্ট দ্বারা ব্যবহৃত একটি সেন্ট্রালাইজড থিম প্রদান করতে ব্যবহার করা যেতে পারে: থিমটি কম্পোনেন্টে পাস করা একটি CSSStyleSheet ইনস্ট্যান্স হতে পারে, থিমের আপডেটগুলি অটোমেটিক কম্পোনেন্টে প্রোপাগেট হয়। ক্যাসকেড-এর উপর নির্ভর না করে নির্দিষ্ট DOM সাবট্রি-তে CSS কাস্টম প্রপার্টি-এর ভ্যালু ডিস্ট্রিবিউট করতে এটি ব্যবহার করা যেতে পারে। এমনকি এটি ব্রাউজারের CSS পার্সারের সাথে সরাসরি ইন্টারফেস হিসেবে ব্যবহার করা যেতে পারে, যার ফলে DOM-এ ইনজেক্ট না করেই স্টাইলশিট প্রিলোড করা সহজ হয়।

স্টাইলশিট তৈরি করা হচ্ছে

এটি করার জন্য নতুন API নিয়ে আসার পরিবর্তে, Constructable StyleSheets স্পেসিফিকেশন CSSStyleSheet() কনস্ট্রাক্টরকে কল করার মাধ্যমে স্টাইলশিট তৈরি করা সম্ভব করে তোলে। ফলাফল হিসেবে পাওয়া CSSStyleSheet অবজেক্টে দুটি নতুন পদ্ধতি আছে যা ফ্ল্যাশ অফ আনস্টাইলড কন্টেন্ট (FOUC) ট্রিগার না করেই স্টাইলশিট নিয়ম যোগ ও আপডেট করা আরও নিরাপদ করে তোলে। replace() এবং replaceSync() দুটি পদ্ধতিই স্টাইলশিটকে CSS-এর স্ট্রিং দিয়ে প্রতিস্থাপন করে এবং replace() একটি Promise রিটার্ন করে। দুটি ক্ষেত্রেই, এক্সটার্নাল স্টাইলশিট রেফারেন্স কাজ করে না—যেকোনও @import নিয়ম উপেক্ষা করা হয় এবং একটি সতর্কতা দেখানো হবে।

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

স্পেসিফিকেশনের আগের ভার্সনে, replace() @import নিয়ম অনুমোদন করত এবং এগুলি লোড করা শেষ হলে একটি প্রমিস রিটার্ন করত। Chrome 84 ভার্সন থেকে, এই ফিচারটি স্পেসিফিকেশন থেকে সরিয়ে দেওয়া হয়েছে এবং Chrome 84 ভার্সন থেকে @import নিয়মগুলি সতর্কতার সাথে উপেক্ষা করা হয়।

কনস্ট্রাক্টেড স্টাইলশিট ব্যবহার করা

Constructable StyleSheets-এর মাধ্যমে নিয়ে আসা দ্বিতীয় নতুন ফিচার হল adoptedStyleSheets প্রপার্টি যা Shadow Roots এবং Documents-এ উপলভ্য। এটি আমাদেরকে নির্দিষ্ট DOM সাবট্রিতে CSSStyleSheet দ্বারা সংজ্ঞায়িত স্টাইলগুলি স্পষ্টভাবে প্রয়োগ করতে দেয়। এটি করার জন্য, আমরা সেই এলিমেন্টে প্রয়োগ করার জন্য এক বা একাধিক স্টাইলশিটের অ্যারেতে প্রপার্টি সেট করি।

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');

// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);

স্পেসিফিকেশনের আগের ভার্সনে, adoptedStyleSheets-কে ফ্রোজেন অ্যারে হিসেবে প্রয়োগ করা হয়েছিল, যার অর্থ হল push()-এর মতো ইন-প্লেস মিউটেশন ব্যতিক্রম হিসেবে দেখানো হয়েছিল। নতুন স্টাইলশিট যোগ করার জন্য অ্যারে আবার সংজ্ঞায়িত করতে হয়: `document.adoptedStyleSheets = [...document.adoptedStyleSheets, newSheet] এখন আর এটি করতে হয় না কারণ স্পেসিফিকেশন আপডেট করা হয়েছে যাতে অ্যারে মিউটেশন করা যায়।

সবগুলি একসাথে রাখা হচ্ছে

Constructable StyleSheets-এর মাধ্যমে, ওয়েব ডেভেলপাররা এখন CSS StyleSheets তৈরি করা এবং DOM ট্রিতে সেগুলি প্রয়োগ করার জন্য একটি স্পষ্ট সমাধান পেয়েছেন। CSS সোর্সের স্ট্রিং থেকে স্টাইলশিট লোড করার জন্য আমাদের কাছে একটি নতুন প্রমিজ-ভিত্তিক API আছে যা ব্রাউজারের বিল্ট-ইন পার্সার এবং লোডিং সিম্যান্টিক্স ব্যবহার করে। সবশেষে, আমাদের কাছে একটি StyleSheet-এর সব ব্যবহারের ক্ষেত্রে স্টাইলশিট আপডেট প্রয়োগ করার মেকানিজম আছে, যা থিম পরিবর্তন এবং রঙের পছন্দের মতো বিষয়গুলিকে সহজ করে তোলে।

ডেমো দেখুন

ভবিষ্যতের কথা ভেবে প্ল্যান করা

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

আরও তথ্য

• Chrome প্ল্যাটফর্ম স্ট্যাটাস
• উদাহরণ
• API
• ব্যাখ্যাকারী
• প্রয়োগ করার ইচ্ছা
• শিপ করার ইচ্ছা
• Discourse