জাভাস্ক্রিপ্ট মডিউলের মতো একই সিনট্যাক্স ব্যবহার করে সিএসএস স্টাইলশীট আমদানি করতে কীভাবে সিএসএস মডিউল স্ক্রিপ্ট ব্যবহার করবেন তা শিখুন।
নতুন CSS মডিউল স্ক্রিপ্ট বৈশিষ্ট্যের সাথে, আপনি JavaScript মডিউলের মতো import বিবৃতি সহ CSS স্টাইল শীট লোড করতে পারেন। স্টাইল শীটগুলি তারপরে নথিতে বা শ্যাডো রুটে প্রয়োগ করা যেতে পারে নির্মাণযোগ্য স্টাইলশীটের মতো। সিএসএস আমদানি এবং প্রয়োগ করার অন্যান্য উপায়ের তুলনায় এটি আরও সুবিধাজনক এবং আরও কার্যকর হতে পারে।
ব্রাউজার সমর্থন
সিএসএস মডিউল স্ক্রিপ্টগুলি ডিফল্টরূপে Chrome এবং এজ সংস্করণ 93-এ উপলব্ধ।
Firefox এবং Safari-এ সমর্থন এখনও উপলব্ধ নয়। যথাক্রমে Gecko বাগ এবং WebKit বাগ- এ বাস্তবায়নের অগ্রগতি ট্র্যাক করা যেতে পারে।
পূর্বশর্ত
- জাভাস্ক্রিপ্ট মডিউলের সাথে পরিচিতি।
- নির্মাণযোগ্য স্টাইলশীটগুলির সাথে পরিচিতি।
CSS মডিউল স্ক্রিপ্ট ব্যবহার করে
একটি সিএসএস মডিউল স্ক্রিপ্ট আমদানি করুন এবং এটি একটি নথিতে বা ছায়া রুটে প্রয়োগ করুন:
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
একটি CSS মডিউল স্ক্রিপ্টের ডিফল্ট রপ্তানি হল একটি নির্মাণযোগ্য স্টাইলশীট যার বিষয়বস্তুগুলি আমদানি করা ফাইলের। অন্য যে কোনো নির্মাণযোগ্য স্টাইলশীটের মতো, এটি adoptedStyleSheets ব্যবহার করে নথি বা শ্যাডো রুটে প্রয়োগ করা হয়।
JavaScript থেকে CSS প্রয়োগ করার অন্যান্য উপায়ের বিপরীতে, CSS টেক্সটের জাভাস্ক্রিপ্ট স্ট্রিংগুলির সাথে <style> উপাদান তৈরি বা বিশৃঙ্খলা করার প্রয়োজন নেই।
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' import assertion:
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 সমস্যায় এই স্পেসিফিকেশন আলোচনা ট্র্যাক করুন।