CSS-Modulskripts zum Importieren von Stylesheets verwenden

Hier erfahren Sie, wie Sie mit CSS-Modulscripts CSS-Stylesheets mit derselben Syntax wie JavaScript-Module importieren.

Dan Clark

Mit der neuen Funktion „CSS-Modulscripts“ können Sie CSS-Stylesheets mit import-Anweisungen laden, genau wie JavaScript-Module. Die Stylesheets können dann auf Dokumente oder Schattenwurzeln auf dieselbe Weise angewendet werden wie konfigurierbare Stylesheets. Das kann einfacher und leistungsfähiger sein als andere Möglichkeiten zum Importieren und Anwenden von CSS.

Unterstützte Browser

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

In Firefox und Safari ist die Funktion noch nicht verfügbar. Den Fortschritt der Implementierung können Sie unter den Gecko-Fehler bzw. dem WebKit-Fehler verfolgen.

Vorbereitung

CSS-Modulscripts verwenden

So importieren Sie ein CSS-Modul-Script und wenden es auf ein Dokument oder einen Schatten-Root an:

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

Der Standardexport eines CSS-Modulscripts ist ein konfigurierbares Stylesheet, dessen Inhalt der der importierten Datei entspricht. Wie jedes andere konstruierbare Stylesheet wird es mit adoptedStyleSheets auf Dokumente oder Schattenwurzeln angewendet.

Anders als bei anderen Methoden zum Anwenden von CSS aus JavaScript müssen Sie keine <style>-Elemente erstellen oder JavaScript-Strings mit CSS-Text bearbeiten.

CSS-Module bieten einige der gleichen Vorteile wie JavaScript-Module.

  • Deduplizierung:Wenn dieselbe CSS-Datei an mehreren Stellen in eine Anwendung importiert wird, wird sie trotzdem nur einmal abgerufen, instanziiert und geparst.
  • Einheitliche Auswertungsreihenfolge:Wenn das importierende JavaScript ausgeführt wird, kann davon ausgegangen werden, dass das importierte Stylesheet bereits abgerufen und geparst wurde.
  • Sicherheit:Module werden mit CORS abgerufen und es wird eine strenge MIME-Typprüfung verwendet.

Importanmerkungen (Was bedeutet assert?)

Der Teil assert { type: 'css' } der import-Anweisung ist eine Importaussage. Dies ist erforderlich. Andernfalls wird import als normaler JavaScript-Modulimport behandelt und der Vorgang schlägt fehl, wenn die importierte Datei keinen JavaScript-MIME-Typ hat.

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 dynamischem Import importieren, mit einem neuen zweiten Parameter für die type: 'css'-Importaussage:

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

@import Regeln sind noch nicht zulässig

Derzeit funktionieren CSS-@import-Regeln nicht in konstruierbaren Stylesheets, einschließlich CSS-Modulscripts. Wenn in einem Stylesheet, das erstellt werden kann, @import-Regeln vorhanden sind, werden diese 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 Spezifikation wird möglicherweise um die Unterstützung von @import in CSS-Modulscripts erweitert. Folgen Sie der Diskussion zu dieser Spezifikation im GitHub-Problem.