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

নির্বিঘ্ন পুনঃব্যবহারযোগ্য শৈলী।

জেসন মিলার

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

Browser Support

  • ক্রোম: ৭৩।
  • প্রান্ত: ৭৯।
  • ফায়ারফক্স: ১০১।
  • সাফারি: ১৬.৪।

Source

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

রচিত CSS থেকে ইনস্ট্যানসিয়েশন হয়ে অ্যাপ্লিকেশন পর্যন্ত প্রবাহ দেখানো ডায়াগ্রাম।

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

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

স্টাইলশীট তৈরি করা

এই কাজটি করার জন্য একটি নতুন এপিআই (API) চালু করার পরিবর্তে, কনস্ট্রাকটেবল স্টাইলশিটস স্পেসিফিকেশন 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..."

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

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

// 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);

সবকিছু একসাথে মিলিয়ে

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

ডেমো দেখুন

ভবিষ্যতের দিকে তাকিয়ে

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

আরও তথ্য