बनाने लायक स्टाइलशीट

आसानी से इस्तेमाल की जा सकने वाली स्टाइल.

जेसन मिलर

बनाई गई स्टाइलशीट एक ऐसा तरीका है जिसकी मदद से शैडो DOM का इस्तेमाल करते समय, फिर से इस्तेमाल की जा सकने वाली स्टाइल बनाई और डिस्ट्रिब्यूट की जा सकती हैं.

JavaScript का इस्तेमाल करके स्टाइलशीट बनाना हमेशा से मुमकिन रहा है. हालांकि, लंबे समय से यह प्रोसेस document.createElement('style') का इस्तेमाल करके <style> एलिमेंट बनाने और उसके बाद उसकी शीट प्रॉपर्टी को ऐक्सेस करने की रही है, ताकि उस CSSStyleSheet इंस्टेंस का रेफ़रंस लिया जा सके. इस तरीके से डुप्लीकेट सीएसएस कोड और इसके अटैंडेंट ब्लोट बन सकते हैं. साथ ही, बिना स्टाइल वाले कॉन्टेंट के फ़्लैश के साथ लीड अटैच करने से कोई फ़र्क़ नहीं पड़ता है. CSSStyleSheet इंटरफ़ेस, सीएसएस रिप्रज़ेंटेशन इंटरफ़ेस के कलेक्शन का रूट है. इसे CSSOM कहा जाता है. यह प्रोग्राम के हिसाब से, स्टाइलशीट में हेर-फेर करने और पुराने तरीके से जुड़ी समस्याओं को दूर करने का तरीका उपलब्ध कराता है.

कंस्ट्रक्शनेबल स्टाइलशीट की मदद से, शेयर की गई सीएसएस स्टाइल तय और तैयार की जा सकती हैं. इसके बाद, उन स्टाइल को कई शैडो रूट या दस्तावेज़ों पर लागू किया जा सकता है. शेयर की गई CSSStyleSheet के अपडेट, उन सभी रूट पर लागू हो जाते हैं जिनमें इसे इस्तेमाल किया गया है. साथ ही, शीट लोड होने के बाद स्टाइलशीट अपनाना तेज़ और सिंक्रोनस होता है.

कंस्ट्रक्टेबल स्टाइलशीट के ज़रिए सेट अप किया गया असोसिएशन, कई अलग-अलग ऐप्लिकेशन के साथ काम करता है. इसका इस्तेमाल, कई कॉम्पोनेंट के लिए इस्तेमाल होने वाली एक ही थीम देने के लिए किया जा सकता है: यह थीम एक CSSStyleSheet इंस्टेंस हो सकती है, जो कॉम्पोनेंट को पास की जाती है. इससे, थीम में ऐसे अपडेट होते हैं जो कॉम्पोनेंट में अपने-आप लागू होते हैं. इसका इस्तेमाल, कैस्केड के बिना, खास डीओएम सबट्री में सीएसएस कस्टम प्रॉपर्टी की वैल्यू को डिस्ट्रिब्यूट करने के लिए किया जा सकता है. इसका इस्तेमाल, ब्राउज़र के सीएसएस पार्सर के डायरेक्ट इंटरफ़ेस के तौर पर भी किया जा सकता है. इससे स्टाइलशीट को DOM में इंजेक्ट किए बिना, पहले से लोड करना आसान हो जाता है.

स्टाइलशीट बनाना

ऐसा करने के लिए, नया एपीआई पेश करने के बजाय, Constructable StyleSheets की खास जानकारी की मदद से, CSSStyleSheet() कंस्ट्रक्टर का इस्तेमाल करके ज़रूरी स्टाइलशीट बनाई जा सकती हैं. नतीजे देने वाले CSSStyleSheet ऑब्जेक्ट में दो नए तरीके हैं, जो बिना स्टाइल वाले कॉन्टेंट का Flash (FOUC) ट्रिगर किए बिना, स्टाइलशीट के नियमों को जोड़ना और अपडेट करना ज़्यादा सुरक्षित बनाते हैं. replace() और replaceSync() दोनों तरीके, स्टाइलशीट को सीएसएस की स्ट्रिंग से बदलते हैं और 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..."

बनाई गई स्टाइलशीट का इस्तेमाल करना

कंस्ट्रक्टेबल स्टाइलशीट की ओर से पेश की गई दूसरी नई सुविधा, adoptedStyleSheets प्रॉपर्टी है. यह प्रॉपर्टी Shadow Roots और दस्तावेज़ पर उपलब्ध है. इससे, हमें 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);