Scopri come utilizzare gli script di moduli CSS per importare i fogli di stile CSS utilizzando la stessa sintassi dei moduli JavaScript.
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
- Familiarità con i moduli JavaScript.
- Familiarità con i fogli di stile costruibili.
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.