CSS-Modulskripts zum Importieren von Stylesheets verwenden

Hier erfahren Sie, wie Sie CSS-Modulskripts verwenden, um CSS-Stylesheets mit derselben Syntax wie JavaScript-Module zu importieren.

Dan Clark

Mit der neuen Funktion für CSS-Modulscripts können Sie CSS-Stylesheets mit import-Anweisungen laden, genau wie JavaScript-Module. Die Stylesheets können dann auf Dokumente oder Shadow-Roots angewendet werden, genau wie konstruierbare Stylesheets. Das kann praktischer und leistungsfähiger sein als andere Methoden zum Importieren und Anwenden von CSS.

Unterstützte Browser

CSS-Modulskripts sind in Chrome und Edge ab Version 93 standardmäßig verfügbar.

Die Unterstützung für Firefox und Safari ist noch nicht verfügbar. Der Fortschritt der Implementierung kann im Gecko-Fehler bzw. im WebKit-Fehler verfolgt werden.

Vorbereitung

CSS-Modulskripts verwenden

Importieren Sie ein CSS-Modulskript und wenden Sie es so auf ein Dokument oder ein Shadow-Root an:

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

Der Standardexport eines CSS-Modulskripts ist ein konstruierbares Stylesheet, dessen Inhalt dem der importierten Datei entspricht. Wie jedes andere konstruierbare Stylesheet wird es mit adoptedStyleSheets auf Dokumente oder Shadow Roots angewendet.

Im Gegensatz zu anderen Methoden, CSS über JavaScript anzuwenden, müssen Sie keine <style>-Elemente erstellen oder sich mit JavaScript-Strings von CSS-Text herumschlagen.

CSS-Module bieten auch einige der Vorteile von JavaScript-Modulen.

  • Deduplizierung: Wenn dieselbe CSS-Datei von mehreren Stellen in einer Anwendung importiert wird, wird sie trotzdem nur einmal abgerufen, instanziiert und geparst.
  • Konsistente Reihenfolge der Auswertung: Wenn das importierende JavaScript ausgeführt wird, kann es sich darauf verlassen, dass das importierte Stylesheet bereits abgerufen und geparst wurde.
  • Sicherheit: Module werden mit CORS abgerufen und verwenden eine strikte MIME-Typ-Überprüfung.

Import-Assertions (was hat es mit „assert“ auf sich?)

Der Teil assert { type: 'css' } der Anweisung import ist eine Import-Assertion. Dies ist erforderlich. Ohne diese Angabe wird die import als normaler JavaScript-Modulimport behandelt und schlägt fehl, wenn die importierte Datei einen MIME-Typ hat, der nicht JavaScript ist.

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".

Dynamisch importierte Stylesheets

Sie können ein CSS-Modul auch mit einem dynamischen Import importieren, wobei ein neuer zweiter Parameter für die Import-Assertion type: 'css' verwendet wird:

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

@import Regeln noch nicht zulässig

Derzeit funktionieren CSS-@import-Regeln nicht in konstruierbaren Stylesheets, einschließlich CSS-Modulskripts. Wenn @import-Regeln in einem konstruierbaren Stylesheet vorhanden sind, werden diese Regeln ignoriert.

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

Die Unterstützung für @import in CSS-Modulskripts wird möglicherweise der Spezifikation hinzugefügt. Sie können diese Diskussion zur Spezifikation im GitHub-Problem verfolgen.