JavaScript মডিউলের মতো একই সিনট্যাক্স ব্যবহার করে CSS স্টাইলশিট ইমপোর্ট করার জন্য CSS মডিউল স্ক্রিপ্ট কীভাবে ব্যবহার করতে হয় তা জানুন।
নতুন CSS মডিউল স্ক্রিপ্ট ফিচারের সাহায্যে, আপনি import স্টেটমেন্টের মাধ্যমে CSS স্টাইল শিট লোড করতে পারবেন,
ঠিক যেমন JavaScript
মডিউল। স্টাইল শিটগুলি
তারপরে ডকুমেন্টে বা শ্যাডো
রুটে কনস্ট্রাক্টেবল
স্টাইলশিটের মতো একইভাবে
প্রয়োগ করা যেতে পারে। CSS ইমপোর্ট ও প্রয়োগ করার অন্যান্য উপায়ের তুলনায় এটি
আরও সুবিধাজনক ও আরও
কার্যকর
হতে পারে।
ব্রাউজার সহায়তা
Chrome ও Edge-এর 93 ভার্সনে CSS মডিউল স্ক্রিপ্ট ডিফল্ট হিসেবে উপলভ্য।
Firefox ও Safari-তে এখনও এই সুবিধা উপলভ্য নয়। ইমপ্লিমেন্টেশনের অগ্রগতি যথাক্রমে Gecko bug এবং WebKit bug-এ ট্র্যাক করা যেতে পারে।
পূর্বশর্ত
- জাভাস্ক্রিপ্ট মডিউল সম্পর্কে জানা।
- কনস্ট্রাক্টেবল স্টাইলশিট সম্পর্কে জানা।
CSS মডিউল স্ক্রিপ্ট ব্যবহার করা হচ্ছে
CSS মডিউল স্ক্রিপ্ট ইমপোর্ট করুন এবং এটি কোনও ডকুমেন্ট বা শ্যাডো রুটে এইভাবে প্রয়োগ করুন:
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
CSS মডিউল স্ক্রিপ্টের ডিফল্ট এক্সপোর্ট হল একটি কনস্ট্রাক্টেবল
স্টাইলশিট যার
কন্টেন্ট হল ইমপোর্ট করা ফাইলের কন্টেন্ট। অন্য যেকোনও কনস্ট্রাক্টেবল স্টাইলশিটের মতো, এটি
adoptedStyleSheets ব্যবহার করে ডকুমেন্ট বা শ্যাডো রুটে
প্রয়োগ করা হয়।
জাভাস্ক্রিপ্ট থেকে CSS প্রয়োগ করার অন্যান্য উপায়ের মতো, <style> এলিমেন্ট তৈরি করার বা
CSS টেক্সটের জাভাস্ক্রিপ্ট স্ট্রিং নিয়ে ঘাঁটাঘাঁটি করার প্রয়োজন নেই।
জাভাস্ক্রিপ্ট মডিউলের মতো CSS মডিউলেরও কিছু একই সুবিধা আছে।
- ডিডুপ্লিকেশন: কোনও অ্যাপ্লিকেশনের একাধিক জায়গা থেকে একই CSS ফাইল ইমপোর্ট করা হলে, সেটি এখনও শুধুমাত্র একবারই ফেচ, ইনস্ট্যান্টিয়েট ও পার্স করা হবে।
- মূল্যায়নের ধারাবাহিক ক্রম: ইমপোর্ট করা জাভাস্ক্রিপ্ট যখন রান করে, তখন এটি ইমপোর্ট করা স্টাইলশিটের উপর নির্ভর করতে পারে যা আগে থেকেই ফেচ ও পার্স করা হয়েছে।
- নিরাপত্তা: মডিউলগুলি CORS-এর মাধ্যমে আনা হয় এবং কঠোর MIME-টাইপ চেকিং ব্যবহার করে।
অ্যাসার্শন ইমপোর্ট করুন ('assert' কী?)
import স্টেটমেন্টের assert { type: 'css' } অংশটি হল একটি ইমপোর্ট
অ্যাসার্শন। এটি প্রয়োজন; এটি ছাড়া, import-কে
সাধারণ জাভাস্ক্রিপ্ট মডিউল ইমপোর্ট হিসেবে বিবেচনা করা হয় এবং ইমপোর্ট করা ফাইলে জাভাস্ক্রিপ্ট নয় এমন MIME-এর প্রকার থাকলে
ব্যর্থ হবে।
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".
ডায়নামিকভাবে ইমপোর্ট করা স্টাইলশিট
এছাড়াও, আপনি ডায়নামিক
ইমপোর্ট ব্যবহার করে CSS মডিউল ইমপোর্ট করতে পারবেন, যেখানে type:
'css' ইমপোর্ট অ্যাসারশনের জন্য নতুন দ্বিতীয় প্যারামিটার থাকবে:
const cssModule = await import('./style.css', {
assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];
@importটি নিয়ম এখনও অনুমোদিত নয়
বর্তমানে CSS @import নিয়ম
কনস্ট্রাক্টেবল স্টাইলশিটে কাজ করে না, যার মধ্যে CSS মডিউল স্ক্রিপ্টও রয়েছে। @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>
CSS মডিউল স্ক্রিপ্টে @import-এর জন্য সহায়তা স্পেসিফিকেশনে যোগ করা হতে পারে। GitHub সমস্যা-তে এই
স্পেসিফিকেশন সংক্রান্ত আলোচনা ট্র্যাক করুন।