Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【CSS Modules】scriptingメディア機能の使い方

scriptingメディア機能の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

scriptingプロパティは、ウェブページが表示されている環境がスクリプト(JavaScriptなど)をどの程度サポートしているかの情報を保持するプロパティです。このプロパティはCSSのメディアクエリ内で使用され、ユーザーエージェント(ウェブブラウザやPDFビューアなど、コンテンツを表示するソフトウェア)のスクリプトサポート状況に応じて、異なるスタイルを適用するために利用されます。

具体的には、以下の3つの値があります。 「none」は、スクリプトが一切サポートされていない環境を示します。 「initial-only」は、初期読み込み時にのみスクリプトが利用可能で、その後ユーザー操作などによって無効化される可能性がある環境を表します。例えば、一部のビューアなどがこれに該当する場合があります。 「enabled」は、スクリプトが完全にサポートされており、通常通り機能する環境を示します。

このプロパティを使用することで、JavaScriptに依存するインタラクティブな要素を持つウェブサイトにおいて、スクリプトが無効な環境や部分的にしか利用できない環境でも、ユーザーエクスペリエンスを損なわないよう、適切な代替表示やシンプルなレイアウトを提供することができます。スクリプトのサポート状況に応じてスタイルを切り替えることで、様々なユーザー環境において、ウェブサイトの見た目や動作を最適化し、より安定したユーザー体験を提供することが可能になります。

公式リファレンス: scripting

構文(syntax)

1@media (scripting: enabled) {
2  /* スクリプトが有効な場合に適用されるスタイル */
3}

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません