استخدام النصوص البرمجية لوحدة CSS لاستيراد أوراق الأنماط

تعرَّف على كيفية استخدام نصوص وحدة CSS لاستيراد ملفات CSS باستخدام البنية نفسها المستخدَمة في وحدات JavaScript.

Dan Clark

باستخدام ميزة نصوص وحدة CSS الجديدة، يمكنك تحميل جداول التنسيقات في CSS باستخدام عبارات import، تمامًا مثل وحدات JavaScript. يمكن بعد ذلك تطبيق جداول الأنماط على المستندات أو جذور الظل بالطريقة نفسها التي يتم بها تطبيق جداول الأنماط القابلة للإنشاء. يمكن أن يكون هذا الإجراء أكثر ملاءمةً وأكثر فعاليةً من الطرق الأخرى لاستيراد ملف CSS وتطبيقه.

توافق المتصفّح

تتوفّر النصوص البرمجية لوحدة CSS تلقائيًا في Chrome وEdge في الإصدار 93.

لا يتوفّر هذا الإجراء في Firefox وSafari بعد. يمكن تتبُّع مستوى تقدّم التنفيذ في خطأ Gecko وخطأ WebKit ، على التوالي.

المتطلبات الأساسية

• الإلمام بوحدات JavaScript
• معرفة بتنسيقات ملفّات الأنماط القابلة للإنشاء

استخدام النصوص البرمجية لوحدات CSS

استورِد نصًا برمجيًا لوحدة CSS وطبِّقه على مستند أو جذر ظلّ على النحو التالي:

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

عملية التصدير التلقائية لنص وحدة CSS هي ملف أسلوب تنسيق CSS قابل للإنشاء الذي يحتوي على محتويات الملف المستورَد. مثل أي جدول أسلوب آخر قابل للإنشاء، يتم تطبيقه على المستندات أو جذور الظل باستخدام adoptedStyleSheets.

على عكس الطرق الأخرى لتطبيق CSS من JavaScript، ليست هناك حاجة إلى إنشاء عناصر <style> أو اللعب بسلاسل JavaScript من نص CSS.

تتميز وحدات CSS أيضًا ببعض الفوائد نفسها التي تقدّمها وحدات JavaScript.

• إزالة التكرار: في حال استيراد ملف CSS نفسه من أماكن متعدّدة في تطبيق، لن يتم الحصول عليه وإنشاء مثيل له وتحليله إلا مرة واحدة.
• الترتيب المتسق للتقييم: عند تشغيل ملف JavaScript الذي يتم استيراده، يمكن أن يعتمد على ورقة الأنماط التي يستوردها والتي سبق أن تم جلبها وتحليلها.
• الأمان: يتم جلب الوحدات باستخدام سياسة مشاركة الموارد المتعددة المصادر (CORS) وتستخدم عملية التحقّق الصارم من نوع MIME.

استيراد التأكيدات (ماذا يحدث مع "assert"؟)

الجزء assert { type: 'css' } من عبارة import هو تأكيد استيراد. هذا الإجراء مطلوب، وبدونه، يتم التعامل مع 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".

جداول الأنماط المستورَدة ديناميكيًا

يمكنك أيضًا استيراد وحدة CSS باستخدام استيراد ديناميكي، مع مَعلمة ثانية جديدة لبيان الاستيراد type: 'css':

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

يُرجى العلم أنّه تتم إضافة cssModule.default (وليس cssModule نفسه) إلى adoptedStyleSheets. ويرجع ذلك إلى أنّ العنصر الذي تم إرجاعه من import() الديناميكي هو عنصر مساحة اسم الوحدة. CSSStyleSheet هي عملية التصدير التلقائية للوحدة، لذا يتم الوصول إليها على العنوان 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.