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

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

Dan Clark

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

ब्राउज़र समर्थन

सीएसएस मॉड्यूल स्क्रिप्ट, 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 के चलने पर, यह इंपोर्ट की जा रही स्टाइलशीट पर भरोसा कर सकती है. ऐसा इसलिए, क्योंकि स्टाइलशीट को पहले ही फ़ेच और पार्स किया जा चुका है.
• सुरक्षा: मॉड्यूल, CORS के साथ फ़ेच किए जाते हैं और एमआईएमई टाइप की सख्त जांच का इस्तेमाल करते हैं.

इंपोर्ट असर्शन ('assert' क्या है?)

import स्टेटमेंट का assert { type: 'css' } हिस्सा, इंपोर्ट असर्शन है. यह ज़रूरी है. इसके बिना, import को सामान्य JavaScript मॉड्यूल इंपोर्ट के तौर पर माना जाता है. साथ ही, अगर इंपोर्ट की गई फ़ाइल का एमआईएमई टाइप 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 पर मौजूद समस्या में, इस खास जानकारी से जुड़ी चर्चा को ट्रैक करें.