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

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

Dan Clark

Dzięki nowej funkcji skryptów modułu CSS możesz wczytywać arkuszy stylów CSS za pomocą instrukcji import, tak jak w przypadku modułów JavaScript. Można je następnie zastosować do dokumentów lub shadow roots w taki sam sposób jak konstruowalne arkusze stylów. Może to być wygodniejsze i bardziej wydajne niż inne sposoby importowania i zastosowywania CSS.

Obsługa przeglądarek

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

Przeglądarki Firefox i Safari nie są jeszcze obsługiwane. Postęp wdrażania można śledzić odpowiednio w przypadku błędu Gecko i błędu WebKit.

Wymagania wstępne

Korzystanie ze skryptów modułu CSS

Zaimportuj skrypt modułu CSS i zastosuj go do dokumentu lub katalogu głównego cienia 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 strona stylów z możliwością tworzenia, której zawartość odpowiada zaimportowanemu plikowi. Podobnie jak każda inna budowalna szata graficzna, jest ona stosowana do dokumentów lub katalogów zduplikowanych za pomocą adoptedStyleSheets.

W przeciwieństwie do innych sposobów stosowania CSS z JavaScriptu nie musisz tworzyć elementów <style> ani mieszać się z ciągłymi tekstami JavaScriptu.

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 kilku miejsc w aplikacji, zostanie pobrany, instancjonowany i przeanalizowany tylko raz.
  • Spójna kolejność ocen: gdy importowany kod JavaScript jest uruchomiony, może polegać na tym, że zaimportowany arkusz stylów został już pobrany i przeanalizowany.
  • Zabezpieczenia: moduły są pobierane przy użyciu CORS i stosują rygorystyczne sprawdzanie typu MIME.

Zasady importowania (co oznacza „assert”?)

Część assert { type: 'css' } w instrukcji import jest oświadczeniem o importowaniu. Jest to wymagane. Bez tego import jest traktowany jako zwykły import modułu JavaScript i nie zadziała, jeśli zaimportowany 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".

dynamicznie importowane arkusze stylów,

Moduł CSS możesz też zaimportować za pomocą importu dynamicznego, podając nowy drugi parametr dla stwierdzenia 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 w CSS nie działają w edytowalnych arkuszach stylów, w tym w skryptach modułów CSS. Jeśli w stylówce do tworzenia znajdują się reguły @import, są one ignorowane.

/* 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że zostać dodana obsługa @import w skryptach modułów CSS. Śledź tę dyskusję na temat specyfikacji w problemie na GitHubie.