Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。
モジュール Limited support

CSS import attributes

CSS import attributes を使うと、CSS ファイルを CSSStyleSheet オブジェクトとしてインポートし、Shadow DOM や adoptedStyleSheets で利用できます。

モジュールES2025

概要

CSS import attributes を使うと、CSS ファイルを CSSStyleSheet オブジェクトとしてインポートし、Shadow DOM や adoptedStyleSheets で利用できます。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
javascript.statements.import.import_attributes.type_css
123
123
147
123
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
import sheet from './styles.css' with { type: 'css' };

document.adoptedStyleSheets = [sheet];
// Can also be used in the Shadow DOM
shadowRoot.adoptedStyleSheets = [sheet];

実務での使いどころ

  • CSS import attributes の活用

    CSS ファイルを JavaScript モジュールとしてインポートする機能。with { type: 'css' } 構文を使用。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク

Powered by web-features