שימוש בסקריפטים של מודול CSS כדי לייבא גיליונות סגנונות

למדו כיצד להשתמש בסקריפטים של מודול CSS כדי לייבא גיליונות סגנונות CSS באמצעות אותו תחביר כמו מודולים של JavaScript.

דן קלארק

תכונת הסקריפטים החדשה של מודול ה-CSS מאפשרת לטעון גיליונות סגנונות של CSS עם הצהרות import, בדיוק כמו מודולים של JavaScript. לאחר מכן אפשר להחיל את גיליונות הסגנונות על מסמכים או על רמות רקע בדיוק כמו בגיליונות סגנונות שאפשר ליצור. זו יכולה להיות יותר נוחה ובביצועים טובים יותר מדרכים אחרות לייבוא וליישום של CSS.

תמיכה בדפדפן

סקריפטים של מודול CSS זמינים כברירת מחדל ב-Chrome וב-Edge בגרסה 93.

בשלב זה אין תמיכה ב-Firefox וב-Safari. ניתן לעקוב אחר התקדמות ההטמעה בבאג של Gecko וב-WebKitbug, בהתאמה.

דרישות מוקדמות

• היכרות עם מודולים של 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 הוא טענת נכוֹנוּת (assertion) של ייבוא. זו חובה. בלעדיה, 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 באמצעות ייבוא דינמי עם פרמטר שני חדש עבור טענת הנכוֹנוּת (assertion) 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.