JavaScript मॉड्यूल के सिंटैक्स का इस्तेमाल करके, सीएसएस स्टाइलशीट इंपोर्ट करने के लिए, सीएसएस मॉड्यूल स्क्रिप्ट इस्तेमाल करने का तरीका जानें.
सीएसएस मॉड्यूल स्क्रिप्ट की नई सुविधा की मदद से, JavaScript मॉड्यूल की तरह ही import स्टेटमेंट के साथ सीएसएस स्टाइल शीट लोड की जा सकती हैं. इसके बाद, स्टाइल शीट को दस्तावेज़ों या शैडो रूट पर उसी तरह से लागू किया जा सकता है जिस तरह बनाई जा सकने वाली स्टाइलशीट को लागू किया जाता है. सीएसएस को इंपोर्ट और लागू करने के अन्य तरीकों की तुलना में, यह तरीका ज़्यादा आसान और बेहतर हो सकता है.
ब्राउज़र के इस्तेमाल से जुड़ी सहायता
सीएसएस मॉड्यूल स्क्रिप्ट, Chrome और Edge के 93 वर्शन में डिफ़ॉल्ट रूप से उपलब्ध हैं.
फ़िलहाल, Firefox और Safari में यह सुविधा उपलब्ध नहीं है. लागू करने की प्रोग्रेस को Gecko बग और WebKit बग पर ट्रैक किया जा सकता है.
ज़रूरी शर्तें
- JavaScript के मॉड्यूल के बारे में जानकारी.
- बनाई जा सकने वाली स्टाइलशीट के बारे में जानकारी.
सीएसएस मॉड्यूल स्क्रिप्ट का इस्तेमाल करना
सीएसएस मॉड्यूल स्क्रिप्ट इंपोर्ट करें और इसे किसी दस्तावेज़ या शैडो रूट पर इस तरह लागू करें:
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
CSS मॉड्यूल स्क्रिप्ट का डिफ़ॉल्ट एक्सपोर्ट, बनाई जा सकने वाली स्टाइलशीट होती है. इसमें इंपोर्ट की गई फ़ाइल का कॉन्टेंट होता है. किसी भी दूसरी स्टाइलशीट की तरह, इसे adoptedStyleSheets का इस्तेमाल करके दस्तावेज़ों या शैडो रूट पर लागू किया जाता है.
JavaScript से सीएसएस लागू करने के अन्य तरीकों के उलट, <style> एलिमेंट बनाने या सीएसएस टेक्स्ट की JavaScript स्ट्रिंग में बदलाव करने की ज़रूरत नहीं है.
सीएसएस मॉड्यूल में भी JavaScript मॉड्यूल जैसे कुछ फ़ायदे होते हैं.
- डुप्लीकेट कॉपी हटाना: अगर किसी ऐप्लिकेशन में एक ही सीएसएस फ़ाइल को कई जगहों से इंपोर्ट किया जाता है, तो उसे सिर्फ़ एक बार फ़ेच, इंस्टैंशिएट, और पार्स किया जाएगा.
- आकलन का एक जैसा क्रम: जब इंपोर्ट किया जा रहा JavaScript चल रहा होता है, तो वह उस स्टाइलशीट पर भरोसा कर सकता है जिसे पहले से फ़ेच और पार्स किया जा चुका है.
- सुरक्षा: मॉड्यूल, CORS के ज़रिए फ़ेच किए जाते हैं और 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 की समस्या में, स्पेसिफ़िकेशन के बारे में इस बातचीत को ट्रैक करें.