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
Dan Clark
X GitHub

Dengan fitur skrip modul CSS yang baru, Anda dapat memuat lembar gaya CSS dengan pernyataan import, sama seperti modul JavaScript. Style sheet kemudian dapat diterapkan ke dokumen atau shadow root dengan cara yang sama seperti style sheet yang dapat dibuat. Cara ini mungkin lebih praktis dan berperforma lebih baik dibandingkan cara lain untuk mengimpor dan menerapkan CSS.

Dukungan Browser

Skrip modul CSS tersedia secara default di Chrome dan Edge dalam 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 shadow root 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 kontennya merupakan konten file yang diimpor. Seperti stylesheet yang dapat dibangun lainnya, alat ini diterapkan ke dokumen atau root bayangan menggunakan adoptedStyleSheets.

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

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

  • Penghapusan duplikat: jika file CSS yang sama diimpor dari beberapa tempat dalam aplikasi, file tersebut tetap hanya akan diambil, dibuat instance-nya, dan diurai sekali.
  • Urutan evaluasi yang konsisten: saat JavaScript impor sedang berjalan, metode ini dapat bergantung pada stylesheet yang diimpornya telah diambil dan diurai.
  • Keamanan: modul diambil dengan CORS dan menggunakan pemeriksaan jenis MIME yang ketat.

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

Bagian assert { type: 'css' } dari pernyataan import adalah pernyataan impor. Hal ini diperlukan; jika tidak, 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 yang baru untuk pernyataan impor type: 'css':

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

@import aturan belum diizinkan

Saat ini aturan @import CSS tidak berfungsi di stylesheet yang dapat dibuat, termasuk skrip modul CSS. Jika @import aturan ada di stylesheet yang dapat dibuat, 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.