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łu CSS są domyślnie dostępne w Chrome i Edge w wersji 93.

Obsługa w Firefox i Safari nie jest jeszcze dostępna. Postęp wdrażania można śledzić odpowiednio w błędzie Gecko i błędzie 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ż pewne zalety wspólne z modułami JavaScript.

  • Deduplikacja: jeśli ten sam plik CSS jest importowany z kilku miejsc w aplikacji, zostanie pobrany, uruchomiony i przeanalizowany tylko raz.
  • Spójny porządek wykonywania: gdy kod JavaScript importujący pliki jest wykonywany, może polegać na tym, że importowany przez niego szablon został już pobrany i przeanalizowany.
  • Bezpieczeństwo: moduły są pobierane za pomocą CORS i korzystają z rygorystycznego sprawdzania 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 dział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ą dynamicznego importu, 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.