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

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

دان كلارك
دان كلارك
X GitHub

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

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

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

لا يتوفر الدعم في 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 نفسه من أماكن متعدّدة في تطبيق معيّن، سيستمر جلبه وإنشاء مثيل له وتحليله مرة واحدة فقط.
  • ترتيب تقييم متسق: عند تشغيل ملف 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).

لا تعمل قواعد @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.