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

स्टाइल को आसानी से फिर से इस्तेमाल किया जा सकता है.

Jason Miller

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

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

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

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

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

इसके लिए, नया एपीआई लॉन्च करने के बजाय, Constructable StyleSheets स्पेसिफ़िकेशन का इस्तेमाल किया जाता है. इससे 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..."

स्टाइलशीट बनाने की सुविधा का इस्तेमाल करना

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

जानकारी को एक जगह इकट्ठा किया जा रहा है

कंस्ट्रक्टेबल स्टाइलशीट की मदद से, वेब डेवलपर के पास अब सीएसएस स्टाइलशीट बनाने और उन्हें DOM ट्री पर लागू करने का एक बेहतर तरीका है. हमारे पास एक नया Promise-based API है. इसका इस्तेमाल, सीएसएस सोर्स की स्ट्रिंग से स्टाइलशीट लोड करने के लिए किया जाता है. यह ब्राउज़र के बिल्ट-इन पार्सर और लोडिंग सिमैंटिक्स का इस्तेमाल करता है. आखिर में, हमारे पास StyleSheet के सभी इस्तेमाल के लिए, स्टाइलशीट के अपडेट लागू करने का एक तरीका है. इससे थीम में बदलाव करने और रंग की प्राथमिकताओं जैसी चीज़ें आसान हो जाती हैं.

डेमो देखें

आगे की योजनाएं

Constructable Stylesheets का शुरुआती वर्शन, यहां बताए गए API के साथ शिप किया गया था. हालांकि, इसे इस्तेमाल करने में आसानी हो, इसके लिए काम किया जा रहा है. adoptedStyleSheets FrozenArray को बढ़ाने का प्रस्ताव है. इसमें स्टाइलशीट डालने और हटाने के लिए खास तरीके शामिल हैं. इससे ऐरे क्लोन करने की ज़रूरत नहीं होगी और स्टाइलशीट के डुप्लीकेट रेफ़रंस से बचा जा सकेगा.

ज़्यादा जानकारी

• Chrome Platform Status
• उदाहरण
• एपीआई
• विस्तार से जानकारी देने वाला वीडियो
• लागू करने का इरादा
• शिपिंग की इच्छा
• Discourse