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

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

دن کلارک

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

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

اسکریپت های ماژول CSS به طور پیش فرض در کروم و اج در نسخه 93 موجود است.

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

پیش نیازها

استفاده از اسکریپت های ماژول CSS

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

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

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

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

ماژول های CSS نیز برخی از مزایای مشابه ماژول های جاوا اسکریپت را دارند.

  • Deduplication: اگر یک فایل 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 را با استفاده از import پویا ، با پارامتر دوم جدید برای type: 'css' وارد کنید:

const cssModule = await import('./style.css', {
  assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

قوانین @import هنوز مجاز نیستند

در حال حاضر قوانین CSS @import در شیوه نامه های قابل ساخت، از جمله اسکریپت های ماژول CSS، کار نمی کنند. اگر قوانین @import در یک stylesheet قابل ساخت وجود داشته باشد، آن قوانین نادیده گرفته می شوند.

/* 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 دنبال کنید.