स्टाइलशीट इंपोर्ट करने के लिए, सीएसएस मॉड्यूल स्क्रिप्ट का इस्तेमाल करना

JavaScript मॉड्यूल के सिंटैक्स का इस्तेमाल करके, सीएसएस स्टाइलशीट इंपोर्ट करने के लिए, सीएसएस मॉड्यूल स्क्रिप्ट इस्तेमाल करने का तरीका जानें.

Dan Clark

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सीएसएस मॉड्यूल स्क्रिप्ट, Chrome और Edge के 93 वर्शन में डिफ़ॉल्ट रूप से उपलब्ध होती हैं.

फ़िलहाल, Firefox और Safari में यह सुविधा उपलब्ध नहीं है. लागू करने की प्रोग्रेस को Gecko Bug और WebKit bug पर ट्रैक किया जा सकता है.

ज़रूरी शर्तें

• JavaScript के मॉड्यूल के बारे में जानकारी.
• बनाई जा सकने वाली स्टाइलशीट के बारे में जानकारी.

सीएसएस मॉड्यूल स्क्रिप्ट का इस्तेमाल करना

सीएसएस मॉड्यूल स्क्रिप्ट इंपोर्ट करें और इसे किसी दस्तावेज़ या शैडो रूट पर इस तरह लागू करें:

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

सीएसएस मॉड्यूल स्क्रिप्ट का डिफ़ॉल्ट एक्सपोर्ट एक कंस्ट्रक्शन होने वाली स्टाइलशीट होती है, जिसका कॉन्टेंट इंपोर्ट की गई फ़ाइल का होता है. बनाई जा सकने वाली किसी अन्य स्टाइलशीट की तरह, इसे adoptedStyleSheets का इस्तेमाल करके दस्तावेज़ों या शैडो रूट पर लागू किया जाता है.

JavaScript से सीएसएस लागू करने के अन्य तरीकों के उलट, <style> एलिमेंट बनाने या सीएसएस टेक्स्ट की JavaScript स्ट्रिंग में बदलाव करने की ज़रूरत नहीं है.

सीएसएस मॉड्यूल में भी JavaScript मॉड्यूल जैसे कुछ फ़ायदे होते हैं.

• डुप्लीकेट कॉपी हटाना: अगर किसी ऐप्लिकेशन में एक ही सीएसएस फ़ाइल को कई जगहों से इंपोर्ट किया जाता है, तो उसे सिर्फ़ एक बार फ़ेच, इंस्टैंशिएट, और पार्स किया जाएगा.
• आकलन का एक जैसा क्रम: जब JavaScript इंपोर्ट करने की प्रक्रिया चल रही होती है, तब वह इंपोर्ट की जाने वाली उस स्टाइलशीट पर निर्भर हो सकती है जो पहले से फ़ेच और पार्स की गई है.
• सुरक्षा: मॉड्यूल, सीओआरएस के ज़रिए फ़ेच किए जाते हैं और MIME टाइप की सख्त जांच का इस्तेमाल करते हैं.

एश्योरेशन इंपोर्ट करना ('assert' का क्या मतलब है?)

import स्टेटमेंट का assert { type: 'css' } हिस्सा, इंपोर्ट के बारे में जानकारी है. यह ज़रूरी है; इसके बिना, import को सामान्य JavaScript मॉड्यूल इंपोर्ट के तौर पर माना जाता है. अगर इंपोर्ट की गई फ़ाइल का MIME टाइप, JavaScript के बजाय कोई दूसरा है, तो इंपोर्ट नहीं हो पाएगा.

import sheet from './styles.css'; // Failed to load module script:
                                  // Expected a JavaScript module
                                  // script but the server responded
                                  // with a MIME type of "text/css".

डाइनैमिक तौर पर इंपोर्ट की गई स्टाइलशीट

type: 'css' इंपोर्ट एश्योरेशन के लिए नए दूसरे पैरामीटर के साथ, डाइनैमिक इंपोर्ट का इस्तेमाल करके भी सीएसएस मॉड्यूल इंपोर्ट किया जा सकता है:

const cssModule = await import('./style.css', {
  assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

@import नियमों की अनुमति अब तक नहीं दी गई है

फ़िलहाल, सीएसएस @import नियम, कॉन्स्ट्रक्ट की जा सकने वाली स्टाइलशीट में काम नहीं करते. इनमें सीएसएस मॉड्यूल स्क्रिप्ट भी शामिल हैं. अगर बनाने लायक स्टाइलशीट में @import नियम मौजूद हैं, तो उन नियमों को अनदेखा कर दिया जाएगा.

/* atImported.css */
div {
    background-color: blue;
}

/* styles.css */
@import url('./atImported.css'); /* Ignored in CSS module */
div {
    border: 1em solid green;
}

<!-- index.html -->
<script type="module">
    import styles from './styles.css' assert { type: "css" };
    document.adoptedStyleSheets = [styles];
</script>
<div>This div will have a green border but no background color.</div>

सीएसएस मॉड्यूल स्क्रिप्ट में @import के लिए सहायता, स्पेसिफ़िकेशन में जोड़ी जा सकती है. GitHub की समस्या में, स्पेसिफ़िकेशन के बारे में इस बातचीत को ट्रैक करें.