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

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

Dan Clark

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

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

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

لا يتوفّر هذا الإجراء في 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.