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

Scopri come utilizzare gli script dei moduli CSS per importare gli stili 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. Le stylesheet possono essere applicate ai documenti o alle radici nascoste nello stesso modo delle stylesheet costruibili. Questo può essere più comodo e più efficace rispetto ad altri modi per importare e applicare il CSS.

Supporto dei browser

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

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

Prerequisiti

Utilizzo di script dei moduli CSS

Importa uno script del modulo CSS e applicalo a un documento o a un'origine ombreggiata come segue:

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

L'esportazione predefinita di uno script del modulo CSS è un stylesheet 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 per applicare CSS da JavaScript, non è necessario creare elementi <style> o modificare le stringhe di testo CSS di JavaScript.

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

  • Deduplica: 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 stylesheet 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 sta con "assert"?)

La parte assert { type: 'css' } dell'istruzione import è un'affermazione di importazione. Questo è obbligatorio; senza questo, import viene trattato come un'importazione normale del modulo 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".

Stili CSS importati dinamicamente

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

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

Regole @import non ancora consentite

Al momento le regole @import CSS non funzionano nei fogli di stile costruibili, inclusi gli script dei moduli CSS. Se in un foglio di stile costruibile sono presenti regole @import, 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 del modulo CSS potrebbe essere aggiunto alla specifica. Segui questa discussione sulle specifiche nella issue di GitHub.