फिर से इस्तेमाल किए जा सकने वाले आसान स्टाइल.
कंस्ट्रक्शन होने वाली स्टाइलशीट ऐसी Shadow का उपयोग करते समय फिर से उपयोग की जा सकने वाली शैलियां बनाने और उन्हें वितरित करने का तरीका DOM है.
JavaScript का इस्तेमाल करके, स्टाइलशीट बनाने की सुविधा हमेशा से उपलब्ध है. ह���लांकि,
इस प्रोसेस में लंबे समय से, <style> एलिमेंट बनाने की प्रोसेस रही है
document.createElement('style') और फिर इसकी शीट प्रॉपर्टी को ऐक्सेस करके
बुनियादी जानकारी और
CSSStyleSheet
इंस्टेंस. इस तरीके से डुप्लीकेट सीएसएस कोड और उसका अटेंडेंट ब्लॉक हो सकता है,
और इस तरह अटैच करने पर बिना स्टाइल वाला कॉन्टेंट दिखता है, भले ही
फूला हुआ हो या नहीं. CSSStyleSheet इंटरफ़ेस, सीएसएस के कलेक्शन का रूट होता है
प्रतिनिधित्व करने के लिए इस्तेमाल किए जाने वाले इंटरफ़ेस
CSSOM,
प्रोग्राम बनाकर, स्टाइलशीट में बदलाव करने के साथ-साथ,
समस्याओं को हल करने में मदद मिलती है.
बनाई जा सकने वाली स्टाइलशीट की मदद से, शेयर की गई सीएसएस को तय और तैयार किया जा सकता है स्टाइल सेट करें और फिर उन स्टाइल को एक से ज़्यादा शैडो रूट या दस्तावेज़ पर लागू करें आसानी से और बिना किसी दोहराव के. शेयर की गई CSSStyleSheet के अपडेट इन पर लागू होते हैं उसमें शामिल किए गए सभी क्षेत्रों में विचार किया गया है, और स्टाइलशीट शीट लोड होने के बाद, तेज़ और सिंक करने वाला होता है.
कंस्ट्रक्शनेबल स्टाइलशीट के ज़रिए सेट अप की गई असोसिएशन की मदद से,
दिखाई देता है. इसका इस्तेमाल एक ही जगह पर सभी को ध्यान में रखकर की गई थीम देने के लिए किया जा सकता है
कई कॉम्पोनेंट इसका इस्तेमाल करते हैं: थीम, को पास किया जाने वाला CSSStyleSheet इंस्टेंस हो सकता है
कॉम्पोनेंट. इनमें थीम से जुड़े अपडेट, कॉम्पोनेंट में बदल रहे हैं
स्वचालित रूप से. इसका इस्तेमाल, कैस्केड पर भरोसा किए बिना, सीएसएस कस्टम प्रॉपर्टी की वैल्यू को खास डीओएम सबट्री में डिस्ट्रिब्यूट करने के लिए किया जा सकता है. इसका इस्तेमाल, ब्राउज़र के सीएसएस पार्स करने वाले टूल के डायरेक्ट इंटरफ़ेस के तौर पर भी किया जा सकता है. इससे, स्टाइलशीट को डीओएम में इंजेक्ट किए बिना, उन्हें आसानी से प्रीलोड किया जा सकता है.
स्टाइलशीट बनाना
इस लक्ष्य को पूरा करने के लिए, कोई नया एपीआई शुरू करने के बजाय, कंस्ट्रक्शन
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..."
बनाई गई स्टाइलशीट का इस्तेमाल करना
कंस्ट्रक्शनेबल स्टाइलशीट की ओर से पेश की गई दूसरी नई सुविधा है
adoptedStyleSheets
Shadow पर उपलब्ध प्रॉपर्टी
रूट्स
और दस्तावेज़. यह
हमें किसी दिए गए 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);
यह रही पूरी जानकारी
कंस्ट्रक्शनेबल StyleSheets की मदद से, वेब डेवलपर के पास अब CSS StyleSheets बना कर उन्हें DOM ट्री पर लागू कर सकते हैं. हमारे पास सीएसएस सोर्स की स्ट्रिंग से स्टाइलशीट लोड करने के लिए, एक नया प्रोमिस-आधारित एपीआई है. यह ब्राउज़र के पहले से मौजूद पार्स करने वाले टूल और लोडिंग सेमेटिक्स का इस्तेमाल करता है. आख़िर में, हमारे पास स्टाइलशीट के सभी इस्तेमाल के लिए स्टाइलशीट अपडेट लागू करने का तरीका है. इससे थीम में बदलाव और रंग की प्राथमिकताएं जैसी चीज़ों को आसान बनाया जा सकता है.
आगे की योजनाएं
एपीआई की मदद से शिप की गई कंस्ट्रक्शन वाली स्टाइलशीट का शुरुआती वर्शन
का वर्णन यहां किया गया है, लेकिन चीज़ों को उपयोग में आसान बनाने के लिए अभी काम चल रहा है. adoptedStyleSheets FrozenArray को स्टाइलशीट जोड़ने और हटाने के लिए खास तरीकों के साथ बड़ा करने का प्रस्ताव है. इससे ऐरे को क्लोन करने की ज़रूरत नहीं पड़ेगी और स्टाइलशीट के डुप्लीकेट रेफ़रंस से भी बचा जा सकेगा.