बनाई जा सकने वाली स्टाइलशीट

स्टाइल को आसानी से फिर से इस्तेमाल करने की सुविधा.

Jason Miller

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

Browser Support

• 73
• 79
• 101
• 16.4

Source

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

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

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

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

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

स्पेसिफ़िकेशन के पिछले वर्शन में, replace() ने @import नियमों को अनुमति दी थी. साथ ही, एक Promise दिखाया था, जो इनके लोड होने के बाद रिज़ॉल्व हो गया था. Chrome 84 से, इस सुविधा को स्पेसिफ़िकेशन से हटा दिया गया था. साथ ही, Chrome 84 से @import नियमों को चेतावनी के साथ अनदेखा किया जाता है.

कंस्ट्रक्टेड स्टाइलशीट का इस्तेमाल करना

Constructable StyleSheets की दूसरी नई सुविधा, 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);

स्पेसिफ़िकेशन के पिछले वर्शन में, adoptedStyleSheets को फ़्रोज़न अरे के तौर पर लागू किया गया था. इसका मतलब है कि push() जैसे इन-प्लेस म्यूटेशन ने एक अपवाद को थ्रो किया. नई स्टाइलशीट जोड़ने के लिए, कलेक्शन को फिर से तय करना ज़रूरी था: `document.adoptedStyleSheets = [...document.adoptedStyleSheets, newSheet] अब ऐसा नहीं है, क्योंकि स्पेसिफ़िकेशन को अपडेट कर दिया गया है, ताकि कलेक्शन में बदलाव किए जा सकें.

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

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

डेमो देखें

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

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

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

• Chrome Platform Status
• उदाहरण
• एपीआई
• समझाने वाली
• लागू करने का मकसद
• शिप करने का मकसद
• Discourse