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

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

Jason Miller

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

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 प्रॉपर्टी है. इससे, हमें किसी दिए गए 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);

यह रही पूरी जानकारी

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

डेमो देखें

आगे की योजना

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

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

• Chrome प्लैटफ़ॉर्म का स्टेटस
• उदाहरण
• एपीआई
• एक्सप्लेनर
• लागू करने का इंटेंट
• शिप करने का इंटेंट
• Discourse