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

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

Dan Clark

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

دعم المتصفح

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

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

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

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

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

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

إنّ عملية التصدير التلقائية لملف CSS module script هي ورقة أنماط قابلة للإنشاء تتطابق محتوياتها مع محتويات الملف الذي تم استيراده. Like any other constructable stylesheet, it is applied to documents or shadow roots using 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];

قواعد @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>

قد تتم إضافة ميزة التوافق مع @import في نصوص وحدات CSS إلى المواصفات. يمكنك تتبُّع هذه المناقشة حول المواصفات في مشكلة GitHub.