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

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

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