Utilizzo degli script dei moduli CSS per importare i fogli di stile

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

Dan Clark
Dan Clark
X GitHub

Con la nuova funzionalità degli script di moduli CSS, puoi caricare i fogli di stile CSS con istruzioni import, come accade per i moduli JavaScript. I fogli di stile possono quindi essere applicati ai documenti o alle radici di shadowing allo stesso modo dei fogli di stile costruibili. Questo può essere più pratico e più efficace di altri modi di importare e applicare il codice CSS.

Supporto dei 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 a livello di bug Gecko e di bug WebKit.

Prerequisiti

Utilizzo degli script dei moduli CSS

Importa uno script di modulo CSS e applicalo a un documento o a una radice shadow come segue:

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

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

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

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

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

Importa asserzioni (cosa c'è con "assert"?)

La parte assert { type: 'css' } dell'istruzione import è un'asserzione di importazione. Si tratta di un'operazione obbligatoria; in caso contrario, import viene trattato come una normale importazione del modulo JavaScript e non riuscirà 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 @import CSS non funzionano nei fogli di stile costruibili, inclusi gli script dei moduli CSS. Se sono presenti regole @import in un foglio di stile edificabile, queste regole 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. Monitora questa discussione specifica nella questione GitHub.