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

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

Jason Miller

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

জাভাস্ক্রিপ্ট ব্যবহার করে স্টাইলশীট তৈরি করা সবসময়ই সম্ভব হয়েছে। যাইহোক, প্রক্রিয়াটি ঐতিহাসিকভাবে হয়েছে 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);

এটা সব একসাথে নির্বাণ

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

ডেমো দেখুন

সামনে দেখছি

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

আরও তথ্য

• ক্রোম প্ল্যাটফর্ম স্থিতি
• উদাহরণ
• API
• ব্যাখ্যাকারী
• বাস্তবায়নের অভিপ্রায়
• জাহাজের অভিপ্রায়
• ডিসকোর্স