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

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

डैन क्लार्क

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

ब्राउज़र सहायता

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

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

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

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

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

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

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 से जुड़ी समस्या में ट्रैक करें.