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 lembar gaya CSS dengan pernyataan import, sama seperti JavaScript modul. Style sheet dapat diterapkan pada dokumen atau bayangan root dengan cara yang sama seperti dapat dibangun spreadsheet gaya. Hal ini dapat menjadi lebih nyaman dan lebih berperforma tinggi daripada cara lain mengimpor dan menerapkan CSS.

Dukungan Browser

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

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

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 objek yang dapat dibangun stylesheet yang merupakan isi dari file yang diimpor. Seperti stylesheet lainnya yang dapat dibangun, ini diterapkan ke dokumen atau {i>shadow root<i} menggunakan adoptedStyleSheets

Tidak seperti cara lain untuk menerapkan CSS dari JavaScript, tidak perlu membuat elemen <style> atau main-main dengan {i>string <i}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 akan masih hanya diambil, dibuat instance-nya, dan diuraikan satu kali.
  • Urutan evaluasi yang konsisten: saat JavaScript impor berjalan, JavaScript dapat mengandalkan spreadsheet gaya yang diimpor setelah diambil dan diuraikan.
  • Keamanan: modul diambil dengan CORS dan menggunakan pemeriksaan jenis MIME yang ketat.

Impor Pernyataan (apa dengan 'assert'?)

Bagian assert { type: 'css' } dari pernyataan import adalah impor pernyataan. Tindakan ini wajib dilakukan; 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 dinamis import, dengan parameter kedua 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 dalam stylesheet yang bisa dibuat, termasuk skrip modul CSS. Jika aturan @import ada dalam spreadsheet gaya 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 ini diskusi spesifikasi di masalah GitHub.