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

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

Dan Clark

Dzięki nowej funkcji skryptów modułów CSS możesz wczytywać arkusze stylów CSS za pomocą instrukcji import, podobnie jak moduły JavaScriptu. Arkusze stylów można następnie stosować do dokumentów lub elementów shadow root w taki sam sposób jak konstruowalne arkusze stylów. Może to być wygodniejsze i bardziej wydajne niż inne sposoby importowania i stosowania CSS.

Obsługa przeglądarek

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

Obsługa w przeglądarkach Firefox i Safari nie jest jeszcze dostępna. Postępy we wdrażaniu można śledzić odpowiednio w błędzie Gecko i błędzie WebKit.

Wymagania wstępne

Używanie skryptów modułów CSS

Zaimportuj skrypt modułu CSS i zastosuj go do dokumentu lub elementu shadow root w ten sposób:

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

Domyślny eksport skryptu modułu CSS to konstruowalny arkusz stylów, którego zawartość jest taka sama jak zawartość zaimportowanego pliku. Podobnie jak każdy inny arkusz stylów, który można utworzyć, jest on stosowany do dokumentów lub elementów shadow root za pomocą adoptedStyleSheets.

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

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

  • Usuwanie duplikatów: jeśli ten sam plik CSS jest importowany z wielu miejsc w aplikacji, zostanie pobrany, utworzony i przeanalizowany tylko raz.
  • Spójna kolejność oceny: gdy importowany kod JavaScript jest uruchamiany, może polegać na tym, że importowany arkusz stylów został już pobrany i przeanalizowany.
  • Bezpieczeństwo: moduły są pobierane za pomocą CORS i używają rygorystycznego sprawdzania typu MIME.

Importowanie asercji (o co chodzi z „assert”?)

Część assert { type: 'css' } instrukcji import to asercja importu. Jest to wymagane. Bez tego import jest traktowany jako normalny import modułu JavaScript i nie powiedzie się, jeśli importowany plik ma 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".

Arkusze stylów importowane dynamicznie

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

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

Reguły @import nie są jeszcze dozwolone

Obecnie reguły CSS @import nie działają w konstruowalnych arkuszach stylów, w tym w skryptach modułów CSS. Jeśli w konstruowalnym arkuszu stylów występują 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>

Obsługa @import w skryptach modułów CSS może zostać dodana do specyfikacji. Dyskusję na temat tej specyfikacji możesz śledzić w zgłoszeniu na GitHubie.