Menggunakan Skrip Modul CSS untuk mengimpor stylesheet

Pelajari cara menggunakan skrip modul CSS untuk mengimpor stylesheet CSS menggunakan sintaksis yang sama dengan modul JavaScript.

Dan Clark

Dengan fitur skrip modul CSS baru, Anda dapat memuat sheet gaya CSS dengan pernyataan import, seperti modul JavaScript. Sheet gaya kemudian dapat diterapkan ke dokumen atau root bayangan dengan cara yang sama seperti sheet gaya yang dapat dibuat. Cara ini dapat lebih praktis dan lebih berperforma daripada cara lain untuk mengimpor dan menerapkan CSS.

Dukungan Browser

Skrip modul CSS tersedia secara default di Chrome dan Edge versi 93.

Dukungan di Firefox dan Safari belum tersedia. Progres implementasi dapat dilacak di bug Gecko dan bug WebKit.

Prasyarat

Menggunakan skrip modul CSS

Impor skrip modul CSS dan terapkan ke dokumen atau root bayangan seperti ini:

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

Ekspor default skrip modul CSS adalah stylesheet yang dapat dibuat yang isinya adalah file yang diimpor. Seperti stylesheet lain yang dapat dibuat, stylesheet ini diterapkan ke dokumen atau root bayangan menggunakan adoptedStyleSheets.

Tidak seperti cara lain untuk menerapkan CSS dari JavaScript, Anda tidak perlu membuat elemen <style> atau mengganggu string JavaScript dari teks CSS.

Modul CSS juga memiliki beberapa manfaat yang sama dengan modul JavaScript.

  • Penghapusan duplikat: jika file CSS yang sama diimpor dari beberapa tempat dalam aplikasi, file tersebut hanya akan diambil, dibuat instance-nya, dan diuraikan satu kali.
  • Urutan evaluasi yang konsisten: saat JavaScript impor berjalan, JavaScript tersebut dapat mengandalkan stylesheet yang diimpor yang telah diambil dan diuraikan.
  • Keamanan: modul diambil dengan CORS dan menggunakan pemeriksaan jenis MIME yang ketat.

Impor Pernyataan (apa yang dimaksud dengan 'assert'?)

Bagian assert { type: 'css' } dari pernyataan import adalah pernyataan impor. Hal ini diperlukan; tanpanya, import akan diperlakukan sebagai impor modul JavaScript normal, dan akan gagal jika file yang diimpor memiliki jenis MIME non-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".

Stylesheet yang diimpor secara dinamis

Anda juga dapat mengimpor modul CSS menggunakan impor dinamis, dengan parameter kedua baru untuk pernyataan impor type: 'css':

const cssModule = await import('./style.css', {
  assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

Aturan @import belum diizinkan

Saat ini, aturan @import CSS tidak berfungsi dalam stylesheet yang dapat dibuat, termasuk skrip modul CSS. Jika aturan @import ada di stylesheet yang dapat dibangun, aturan tersebut akan diabaikan.

/* 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>

Dukungan untuk @import dalam skrip modul CSS dapat ditambahkan ke spesifikasi. Lacak diskusi spesifikasi ini di masalah GitHub.