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

Skripts für CSS-Module sind in Version 93 standardmäßig in Chrome und Edge verfügbar.

In Firefox und Safari ist die Funktion noch nicht verfügbar. Der Implementierungsfortschritt kann beim Gecko Bug und dem WebKit-Fehler verfolgt werden.

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.

Im Gegensatz zu anderen Möglichkeiten zur Anwendung von CSS aus JavaScript ist es hier nicht erforderlich, <style>-Elemente zu erstellen oder JavaScript-Strings zu verwirren.

CSS-Module bieten einige derselben 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 wie ein normaler JavaScript-Modulimport behandelt und schlägt fehl, wenn die importierte Datei einen Nicht-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.