Utilizzo di script del modulo CSS per importare fogli di stile

Scopri come utilizzare gli script dei moduli CSS per importare fogli di stile CSS utilizzando la stessa sintassi dei moduli JavaScript.

Dan Clark

Con la nuova funzionalità degli script dei moduli CSS, puoi caricare i fogli di stile CSS con istruzioni import, proprio come i moduli JavaScript. I fogli di stile possono quindi essere applicati ai documenti o alle shadow root nello stesso modo dei fogli di stile costruibili. Questo può essere più comodo e più performante rispetto ad altri modi di importare e applicare il CSS.

Supporto browser

Gli script dei moduli CSS sono disponibili per impostazione predefinita in Chrome ed Edge nella versione 93.

Il supporto in Firefox e Safari non è ancora disponibile. L'avanzamento dell'implementazione può essere monitorato rispettivamente nel bug di Gecko e nel bug di WebKit.

Prerequisiti

Utilizzo di script di moduli CSS

Importa uno script del modulo CSS e applicalo a un documento o a una shadow root in questo modo:

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

L'esportazione predefinita di uno script del modulo CSS è un fogli di stile costruibile i cui contenuti sono quelli del file importato. Come qualsiasi altro foglio di stile costruibile, viene applicato a documenti o shadow root utilizzando adoptedStyleSheets.

A differenza di altri modi di applicare CSS da JavaScript, non è necessario creare elementi <style> o interagire con stringhe JavaScript di testo CSS.

I moduli CSS presentano anche alcuni degli stessi vantaggi dei moduli JavaScript.

  • Deduplicazione: se lo stesso file CSS viene importato da più posizioni in un'applicazione, verrà comunque recuperato, istanziato e analizzato una sola volta.
  • Ordine di valutazione coerente: quando il codice JavaScript di importazione è in esecuzione, può fare affidamento sul fatto che il foglio di stile che importa sia già stato recuperato e analizzato.
  • Sicurezza: i moduli vengono recuperati con CORS e utilizzano un controllo rigoroso del tipo MIME.

Importa asserzioni (cosa significa "assert"?)

La parte assert { type: 'css' } dell'istruzione import è un'asserzione di importazione. Questo attributo è obbligatorio. Senza di esso, import viene trattato come una normale importazione di moduli JavaScript e non andrà a buon fine se il file importato ha un tipo 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".

Fogli di stile importati dinamicamente

Puoi anche importare un modulo CSS utilizzando l'importazione dinamica, con un nuovo secondo parametro per l'asserzione di importazione type: 'css':

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

@import regole non ancora consentite

Al momento, le regole CSS @import non funzionano nei fogli di stile costruibili, inclusi gli script dei moduli CSS. Se in un foglio di stile costruibile sono presenti regole @import, queste verranno ignorate.

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

Il supporto di @import negli script dei moduli CSS potrebbe essere aggiunto alla specifica. Segui questa discussione sulla specifica nel problema di GitHub.