استفاده از اسکریپت‌های ماژول CSS برای وارد کردن برگه سبک نگارش

با نحوه استفاده از اسکریپت‌های ماژول CSS برای وارد کردن برگه سبک نگارش CSS بااستفاده از همان نحو ماژول‌های JavaScript آشنا شوید.

Dan Clark

با ویژگی جدید دستورگان‌های ماژول CSS، می‌توانید شیوه‌نامه‌های CSS را با عبارت‌های import بار کنید، درست مثل ماژول‌های JavaScript. سپس می‌توان برگه‌های سبک نگارش را به همان روش برگه‌های سبک نگارش ساختنی به اسناد یا ریشه‌های سایه اعمال کرد. این روش می‌تواند راحت‌تر و کارآمدتر از روش‌های دیگر وارد کردن و اعمال CSS باشد.

پشتیبانی مرورگر

اسکریپت‌های ماژول CSS به‌طور پیش‌فرض در Chrome و Edge نسخه ۹۳ دردسترس است.

پشتیبانی در Firefox و Safari هنوز دردسترس نیست. پیشرفت پیاده‌سازی را می‌توان به‌ترتیب در اشکال Gecko و اشکال WebKit پیگیری کرد.

پیش‌نیازها

استفاده از دستورگان‌های ماژول CSS

یک اسکریپت ماژول CSS را وارد کنید و آن را به یک سند یا ریشه سایه مانند این اعمال کنید:

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

صادر کردن پیش‌فرض اسکریپت ماژول CSS یک برگه سبک نگارش ساختنی است که محتوای آن همان محتوای فایل واردشده است. مانند هر برگه سبک نگارش قابل ساخت دیگری، بااستفاده از adoptedStyleSheets به سندها یا ریشه‌های سایه اعمال می‌شود.

برخلاف روش‌های دیگر اعمال CSS از JavaScript، نیازی به ایجاد عناصر <style> یا درگیر شدن با رشته‌های JavaScript از نوشتار CSS نیست.

پیمانه‌های CSS نیز برخی‌از مزایای پیمانه‌های JavaScript را دارند.

  • حذف تکرار: اگر فایل CSS یکسانی از چندین مکان در برنامه وارد شود، همچنان فقط یک‌بار واکشی، نمونه‌سازی، و تجزیه می‌شود.
  • ترتیب ارزیابی سازگار: وقتی جاوا اسکریپت واردکننده درحال اجرا است، می‌تواند به برگه سبک نگارشی که وارد می‌کند و قبلاً واکشی و تجزیه شده است تکیه کند.
  • امنیت: ماژول‌ها با CORS واکشی می‌شوند و از بررسی سختگیرانه نوع رسانه استفاده می‌کنند.

وارد کردن ادعاها (موضوع «assert» چیست؟)

بخش assert { type: 'css' } از عبارت import یک ادعای وارد کردن است. این مورد الزامی است؛ بدون آن، با 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 قانون هنوز مجاز نیست

درحال‌حاضر، قوانین @import CSS در برگه‌های سبک نگارش ساختنی، ازجمله اسکریپت‌های ماژول 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>

ممکن است پشتیبانی از @import در اسکریپت‌های ماژول CSS به مشخصات اضافه شود. این بحث مشخصات را در مشکل GitHub دنبال کنید.