নির্মাণযোগ্য স্টাইলশীট

বিজোড় পুনর্ব্যবহারযোগ্য শৈলী.

জেসন মিলার

Shadow DOM ব্যবহার করার সময় কনস্ট্রাক্টেবল স্টাইলশীট হল পুনঃব্যবহারযোগ্য শৈলী তৈরি এবং বিতরণ করার একটি উপায়।

ব্রাউজার সমর্থন

  • 73
  • 79
  • 101
  • 16.4

উৎস

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

সিএসএসের প্রস্তুতি এবং প্রয়োগ দেখানো চিত্র।

নির্মাণযোগ্য স্টাইলশীটগুলি ভাগ করা CSS শৈলীগুলিকে সংজ্ঞায়িত করা এবং প্রস্তুত করা সম্ভব করে এবং তারপর সেই শৈলীগুলিকে একাধিক শ্যাডো রুট বা নথিতে সহজেই এবং নকল ছাড়াই প্রয়োগ করে৷ একটি শেয়ার্ড CSSStyleSheet-এর আপডেটগুলি সেই সমস্ত রুটে প্রয়োগ করা হয় যেখানে এটি গৃহীত হয়েছে এবং একটি স্টাইলশীট গ্রহণ করা দ্রুত এবং সিঙ্ক্রোনাস হয় একবার শীট লোড হয়ে গেলে৷

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

একটি স্টাইলশীট নির্মাণ

এটি সম্পন্ন করার জন্য একটি নতুন API প্রবর্তন করার পরিবর্তে, কনস্ট্রাক্টেবল স্টাইলশিট স্পেসিফিকেশন CSSStyleSheet() কনস্ট্রাক্টরকে আহ্বান করে স্টাইলশীট তৈরি করা সম্ভব করে তোলে। ফলস্বরূপ CSSStyleSheet অবজেক্টের দুটি নতুন পদ্ধতি রয়েছে যা ফ্ল্যাশ অফ আনস্টাইলড কন্টেন্ট (FOUC) ট্রিগার না করে স্টাইলশীট নিয়মগুলি যোগ এবং আপডেট করা নিরাপদ করে তোলে। replace() এবং replaceSync() পদ্ধতি উভয়ই স্টাইলশীটকে CSS এর একটি স্ট্রিং দিয়ে প্রতিস্থাপন করে এবং replace() একটি প্রতিশ্রুতি প্রদান করে। উভয় ক্ষেত্রেই, বাহ্যিক স্টাইলশীট রেফারেন্স সমর্থিত নয়—যেকোনো @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..."

নির্মিত স্টাইলশীট ব্যবহার করে

কনস্ট্রাক্টেবল স্টাইলশিট দ্বারা প্রবর্তিত দ্বিতীয় নতুন বৈশিষ্ট্য হল শ্যাডো রুটস এবং ডকুমেন্টে উপলব্ধ একটি গৃহীত স্টাইলশিট সম্পত্তি। এটি আমাদের একটি প্রদত্ত 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);