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-Modulskripts können Sie CSS-Stylesheets mit import-Anweisungen laden, genau wie JavaScript-Module. Die Stylesheets können dann genauso wie konstruierbare Stylesheets auf Dokumente oder Schattenstammelemente angewendet werden. Dies kann praktischer und leistungsstärker sein als andere Möglichkeiten zum Importieren und Anwenden von CSS.

Unterstützte Browser

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

Unterstützung in Firefox und Safari ist noch nicht verfügbar. Der Fortschritt der Implementierung kann unter Gecko-Programmfehler bzw. WebKit-Programmfehler verfolgt werden.

Voraussetzungen

• Vertrautheit mit JavaScript-Modulen
• Erfahrung mit konstruierbaren Stylesheets

CSS-Modulskripts verwenden

Importieren Sie ein CSS-Modulskript und wenden Sie es wie folgt auf ein Dokument oder einen Schattenstamm 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 Inhalt der importierten Datei entspricht. Wie jedes andere konstruierbare Stylesheet wird es mithilfe von adoptedStyleSheets auf Dokumente oder Schattenstammdaten angewendet.

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

CSS-Module haben auch einige der gleichen Vorteile wie JavaScript-Module.

• Deduplizierung:Wenn dieselbe CSS-Datei von mehreren Stellen in einer Anwendung importiert wird, wird sie weiterhin nur einmal abgerufen, instanziiert und geparst.
• Einheitliche Auswertungsreihenfolge:Wenn der JavaScript-Import ausgeführt wird, kann das importierte Stylesheet bereits abgerufen und geparst werden.
• Sicherheit: Module werden mit CORS abgerufen und durchlaufen eine strenge MIME-Typprüfung.

Assertions importieren (was wird mit „assert“ verwendet?)

Der assert { type: 'css' }-Teil der import-Anweisung ist eine Importassertion. Dies ist erforderlich. Andernfalls wird das import wie ein normaler JavaScript-Modulimport behandelt und schlägt fehl, wenn die importierte Datei einen MIME-Typ ohne JavaScript 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 mithilfe des dynamischen Imports mit einem neuen zweiten Parameter für die Importbestätigung type: 'css' importieren:

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

@import Regeln noch nicht zugelassen

Derzeit funktionieren CSS-@import-Regeln nicht in konstruierbaren Stylesheets, einschließlich CSS-Modulskripts. Wenn @import-Regeln in einem konstruierbaren Stylesheet enthalten 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 kann der Spezifikation hinzugefügt werden. Verfolgen Sie diese Diskussion zu den Spezifikationen im GitHub-Problem.