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

फिर से इस्तेमाल किए जा सकने वाले आसान स्टाइल.

Jason Miller

कंस्ट्रक्शन होने वाली स्टाइलशीट, Shadow DOM का इस्तेमाल करते समय, फिर से इस्तेमाल की जा सकने वाली स्टाइल बनाने और उन्हें लोगों तक पहुंचाने का एक तरीका हैं.

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

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

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

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

इस काम को पूरा करने के लिए कोई नया एपीआई शुरू करने के बजाय, कंस्ट्रक्शनबल स्टाइलशीट की खास बातों से CSSStyleSheet() कंस्ट्रक्टर को लागू करके, ज़रूरी तरीके से स्टाइलशीट बनाई जा सकती हैं. नतीजे के तौर पर मिलने वाले CSSStyleSheet ऑब्जेक्ट में दो नए तरीके हैं जो फ़्लैश ऑफ़ अनस्टाइल कॉन्टेंट (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 और Documents पर उपलब्ध है. इससे हम 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);