Importowanie arkuszy stylów za pomocą skryptów modułów CSS

Dowiedz się, jak wykorzystać skrypty modułu CSS do importowania arkuszy stylów CSS przy użyciu tej samej składni co moduły JavaScript.

Dan Clark
Dan Clark
X GitHub

Dzięki nowej funkcji skryptów w module CSS możesz wczytywać arkusze stylów CSS za pomocą instrukcji import, tak jak moduły JavaScript. Arkusze stylów można następnie stosować do dokumentów lub nadrzędnych katalogów głównych w taki sam sposób jak konstrukcyjne arkusze stylów. Może to być wygodniejsze i skuteczniejsze niż inne sposoby importowania i stosowania kodu CSS.

Obsługa przeglądarek

Skrypty modułu CSS są domyślnie dostępne w Chrome i Edge 93.

Obsługa przeglądarek Firefox i Safari nie jest jeszcze dostępna. Postęp wdrożenia można śledzić odpowiednio przy użyciu informacji o błędzie Gecko i WebKitbug.

Wymagania wstępne

Używanie skryptów modułu CSS

Zaimportuj skrypt modułu CSS i zastosuj go do dokumentu lub elementu źródłowego w taki sposób:

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

Domyślnym eksportem skryptu modułu CSS jest konstrukcyjny arkusz stylów, którego zawartość to treść zaimportowanego pliku. Podobnie jak inne konstrukcyjne arkusze stylów, jest on stosowany do dokumentów i nadrzędnych katalogów głównych za pomocą funkcji adoptedStyleSheets.

W przeciwieństwie do innych sposobów stosowania CSS z JavaScriptu nie trzeba tworzyć elementów <style> ani zapamiętywać ciągów JavaScriptu w tekście CSS.

Moduły CSS mają też niektóre z tych samych zalet co moduły JavaScript.

  • Deduplikacja: jeśli ten sam plik CSS jest importowany z wielu miejsc w aplikacji, nadal będzie on pobierany, tworzony jako instancja i analizowany tylko raz.
  • Spójna kolejność oceny: podczas wykonywania importu JavaScriptu może on polegać na tym, że importowany arkusz stylów został już pobrany i przeanalizowany.
  • Zabezpieczenia: moduły są pobierane za pomocą CORS i z wykorzystaniem ścisłej kontroli typu MIME.

Potwierdzenia dotyczące importowania (co oznacza „assert”?)

Część assert { type: 'css' } instrukcji import to assercja importu. Jest to wymagane. W przeciwnym razie element import będzie traktowany jak zwykły import modułu JavaScript i nie powiedzie się, jeśli importowany plik zawiera typ MIME inny niż 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".

Dynamicznie importowane arkusze stylów

Możesz też zaimportować moduł CSS za pomocą importu dynamicznego z nowym drugim parametrem dla potwierdzenia importu type: 'css':

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

@import reguły nie są jeszcze dozwolone

Obecnie reguły @import CSS nie działają w możliwych do utworzenia arkuszach stylów, w tym w skryptach modułu CSS. Jeśli w konstruktywnym arkuszu stylów znajdują się reguły @import, zostaną one zignorowane.

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

Do specyfikacji możemy dodać obsługę parametru @import w skryptach modułu CSS. Śledź dyskusję na temat tej specyfikacji na stronie problemu z GitHubem.