Importer des feuilles de style à l'aide de scripts de module CSS

Découvrez comment utiliser les scripts de modules CSS pour importer des feuilles de style CSS en utilisant la même syntaxe que les modules JavaScript.

Dan Clark
Dan Clark
X GitHub

La nouvelle fonctionnalité de scripts de module CSS vous permet de charger des feuilles de style CSS avec des instructions import, tout comme les modules JavaScript. Les feuilles de style peuvent ensuite être appliquées à des documents ou à des racines fantômes de la même manière que les feuilles de style constructibles. Cette méthode peut s'avérer plus pratique et plus performante que d'autres méthodes d'importation et d'application de code CSS.

Navigateurs pris en charge

Les scripts de module CSS sont disponibles par défaut dans la version 93 de Chrome et d'Edge.

La prise en charge n'est pas disponible dans Firefox et Safari pour le moment. La progression de l'implémentation peut être suivie pour le bug Gecko et le bug WebKit, respectivement.

Prérequis

Utiliser des scripts de module CSS

Importez un script de module CSS et appliquez-le à un document ou à une racine fantôme comme ceci:

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

L'exportation par défaut d'un script de module CSS est une feuille de style constructible dont le contenu est celui du fichier importé. Comme pour toute autre feuille de style constructible, elle est appliquée aux documents ou aux racines fantômes à l'aide de adoptedStyleSheets.

Contrairement à d'autres manières d'appliquer du code CSS à partir de JavaScript, il n'est pas nécessaire de créer des éléments <style> ni de contenir des chaînes JavaScript de texte CSS.

Les modules CSS présentent également certains des avantages des modules JavaScript.

  • Déduplication:si le même fichier CSS est importé à partir de plusieurs emplacements dans une application, il n'est quand même récupéré, instancié et analysé qu'une seule fois.
  • Ordre d'évaluation cohérent:lorsque le code JavaScript d'importation est en cours d'exécution, la feuille de style importée a déjà été récupérée et analysée.
  • Sécurité:les modules sont récupérés avec CORS et utilisent une vérification stricte du type MIME.

Importer les assertions (qu'est-ce que "assert" ?)

La partie assert { type: 'css' } de l'instruction import est une assertion d'importation. Cette opération est obligatoire. Sans cela, le import est traité comme une importation de module JavaScript normal et échouera si le fichier importé présente un type 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".

Feuilles de style importées dynamiquement

Vous pouvez également importer un module CSS à l'aide de l'importation dynamique, avec un nouveau deuxième paramètre pour l'assertion d'importation type: 'css':

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

@import règles pas encore autorisées

Actuellement, les règles @import CSS ne fonctionnent pas dans les feuilles de style constructibles, y compris les scripts de module CSS. Si une feuille de style constructible contient des règles @import, elles seront ignorées.

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

La prise en charge de @import dans les scripts de module CSS peut être ajoutée à la spécification. Suivez cette discussion sur les spécifications dans le problème GitHub.