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

Copy
1/*
2 * CSS 'scripting' media feature のサンプルコード
3 *
4 * このメディア機能は、ユーザーエージェントがスクリプト（例: JavaScript）を
5 * サポートしているか、またはスクリプトが有効になっているかを検出するために使用します。
6 * システムエンジニアを目指す初心者の方へ: これにより、スクリプトの有効/無効に応じて
7 * ウェブサイトの見た目やコンテンツを調整し、より堅牢なユーザー体験を提供できます。
8 */
9
10/*
11 * スクリプトが有効な環境に適用するスタイル
12 * (例: <div class="js-enabled-content"> のような要素が対象)
13 */
14@media (scripting: enabled) {
15  .js-enabled-content {
16    display: block; /* スクリプト有効時にこのコンテンツを表示 */
17    color: green;
18    border: 1px solid green;
19    padding: 10px;
20  }
21  .no-js-fallback {
22    display: none; /* スクリプト有効時は代替コンテンツを非表示 */
23  }
24}
25
26/*
27 * スクリプトが無効な環境に適用するスタイル
28 * (例: <div class="no-js-fallback"> のような要素が対象)
29 */
30@media (scripting: none) {
31  .js-enabled-content {
32    display: none; /* スクリプト無効時はスクリプト依存コンテンツを非表示 */
33  }
34  .no-js-fallback {
35    display: block; /* スクリプト無効時に代替コンテンツを表示 */
36    color: red;
37    background-color: #ffeeee;
38    border: 1px solid red;
39    padding: 10px;
40  }
41}
42
43/*
44 * 注意点: これらのコンテンツは、CSSがロードされる前のちらつきを防ぐため、
45 * HTML側の要素にデフォルトで `display: none;` を設定し、
46 * メディアクエリで `display: block;` に上書きするのが一般的な実践です。
47 * このサンプルでは、簡潔さを優先し、メディアクエリ内で直接 `display` を指定しています。
48 */

CSSのscriptingメディア機能は、ユーザーエージェント（ウェブブラウザなど）がスクリプト（JavaScriptなど）をサポートしているか、またはスクリプトが現在有効になっているかを検出するために使用されるメディアクエリの一つです。この機能は、システムエンジニアを目指す初心者の方が、ウェブサイトをより堅牢にし、様々なユーザー環境に対応するために理解しておくと役立ちます。

この機能自体に引数や戻り値はありませんが、メディアクエリの条件としてscripting: enabled（スクリプトが有効な場合）またはscripting: none（スクリプトが無効な場合）を指定することで、それぞれの状態に応じて異なるCSSスタイルを適用できます。

サンプルコードでは、このscriptingメディア機能を使って、スクリプトの有効/無効によってコンテンツの表示を切り替える具体的な方法が示されています。

@media (scripting: enabled) のブロックは、ユーザーのブラウザでスクリプトが有効になっている場合に適用されるスタイルを定義しています。ここでは、.js-enabled-content クラスを持つ要素が表示され、スクリプトがない場合の代替コンテンツである .no-js-fallback は非表示に設定されています。これは、JavaScriptで動的な処理を行うコンテンツを表示したい場合に利用します。

逆に、@media (scripting: none) のブロックは、スクリプトが無効になっている場合に適用されます。この場合、スクリプトに依存する .js-enabled-content は非表示になり、代わりに .no-js-fallback クラスを持つ代替コンテンツが表示されるようになります。これにより、スクリプトが無効なユーザーにも必要な情報が適切に伝わるように配慮できます。

このようにscriptingメディア機能を利用することで、JavaScriptの有効/無効に関わらず、すべてのユーザーに適切なユーザー体験を提供するための柔軟なデザインと機能の実装が可能になります。

Copy
1/*
2 * scripting media featureは、ブラウザのクライアントサイドスクリプティング（JavaScriptなど）
3 * の有効・無効状態に基づいてスタイルを適用するために使用されます。
4 *
5 * この例では、JavaScriptが有効な場合と無効な場合で、異なるメッセージ要素の表示を切り替えます。
6 */
7
8/* 
9 * 共通の基本スタイルと、初期状態での表示設定。
10 * 通常、どちらのメッセージも初期は非表示にし、@mediaルールで表示を切り替えます。
11 */
12.js-enabled-message,
13.js-disabled-message {
14  display: none; /* デフォルトでは非表示 */
15  padding: 10px;
16  margin-bottom: 10px;
17  border: 1px solid;
18  font-family: sans-serif;
19  font-size: 1rem;
20}
21
22/*
23 * @media (scripting: enabled)
24 * クライアントサイドスクリプティング（JavaScriptなど）が有効な場合に適用されるスタイル。
25 */
26@media (scripting: enabled) {
27  .js-enabled-message {
28    display: block; /* JavaScriptが有効な場合に表示 */
29    color: #007bff; /* 例: 青色テキスト */
30    border-color: #007bff;
31  }
32
33  .js-disabled-message {
34    display: none; /* JavaScriptが有効な場合は非表示 */
35  }
36}
37
38/*
39 * @media (scripting: none)
40 * クライアントサイドスクリプティング（JavaScriptなど）が無効な場合に適用されるスタイル。
41 */
42@media (scripting: none) {
43  .js-enabled-message {
44    display: none; /* JavaScriptが無効な場合は非表示 */
45  }
46
47  .js-disabled-message {
48    display: block; /* JavaScriptが無効な場合に表示 */
49    color: #dc3545; /* 例: 赤色テキスト */
50    border-color: #dc3545;
51  }
52}

CSSのscripting media featureは、ウェブブラウザのクライアントサイドスクリプティング（JavaScriptなど）が有効か無効かによって、適用するスタイルを切り替えるための機能です。この機能は、ユーザーがJavaScriptを無効にしている場合など、スクリプティングが利用できない環境でも、代替となる表示を提供するために役立ちます。

このscripting media featureには引数はなく、特定の値も返しません。メディアクエリ内でscripting: enabledまたはscripting: noneと指定することで、スクリプティングの状態を判定し、条件に応じたCSSを適用します。

提供されたサンプルコードでは、このscripting media featureの利用例を示しています。まず、.js-enabled-messageと.js-disabled-messageという二つのメッセージ要素に対し、初期状態では両方を非表示（display: none;）にする共通スタイルが設定されています。

次に、@media (scripting: enabled)のルールが適用されるブロックでは、クライアントサイドスクリプティングが有効な場合に、.js-enabled-messageをブロックレベル要素として表示（display: block;）し、青系のスタイルを適用します。このとき、.js-disabled-messageは非表示に維持されます。

対照的に、@media (scripting: none)のルールが適用されるブロックでは、スクリプティングが無効な場合に、.js-disabled-messageを表示し、赤系のスタイルを適用します。同時に、.js-enabled-messageは非表示となります。

このように、scripting media featureを用いることで、JavaScriptの利用可否に応じて、ユーザーに異なるメッセージやインターフェースを提供し、よりアクセシブルで堅牢なウェブアプリケーションを構築することが可能になります。