שימוש בסקריפטים של מודול 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 הוא גיליון סגנונות שניתן ליצור, והתוכן שלו הוא התוכן של הקובץ המיובא. כמו כל גיליון סגנונות אחר שניתן לבנייה, הוא מוחל על מסמכים או על שורשי צל באמצעות 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.