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

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

Dan Clark

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