【CSS Modules】prefers-reduced-dataメディア機能の使い方

Copy
1/*
2 * prefers-reduced-data メディア特性のサンプルコード
3 * ユーザーがデータ通信量の削減を希望している場合に適用されるスタイルです。
4 */
5@media (prefers-reduced-data) {
6  /*
7   * データ削減モードが有効な場合、ページの背景画像を読み込まず非表示にします。
8   * これにより、ユーザーのデータ通信量を節約し、ページの読み込みを高速化できます。
9   * 代わりに、シンプルな背景色を設定します。
10   */
11  body {
12    background-image: none;
13    background-color: #f0f0f0; /* 背景画像がない場合の代替色 */
14  }
15}

prefers-reduced-dataは、CSSのメディア特性の一つで、ウェブサイトの訪問者がデータ通信量の削減を希望しているかどうかを判断するために使用されます。ユーザーがオペレーティングシステムやブラウザの設定で「データセーバーモード」や「低データモード」などを有効にしている場合に、この特性が有効であると認識されます。

この特性は、特定の値を渡す「引数」を持ちません。また、何らかの処理結果を返す「戻り値」もありません。単に、ユーザーがデータ通信量の削減を希望している状態か否かを判定するための条件として機能します。

サンプルコードでは、@media (prefers-reduced-data)という記述によって、ユーザーがデータ削減を希望している場合にのみ、特定のスタイルが適用されるように設定されています。具体的には、ウェブページの背景画像を読み込まずに非表示にし、代わりにシンプルな背景色（#f0f0f0）を設定しています。これにより、画像ファイルのダウンロードにかかるデータ通信量を節約し、ページの読み込み速度を向上させることができます。

このようにprefers-reduced-dataを活用することで、ユーザーの通信環境や設定に配慮し、より快適なウェブ体験を提供することが可能になります。

Copy
1/*
2 * prefers-reduced-data は、ユーザーがデータ使用量を最小限に抑えたい場合に適用されるメディア特性です。
3 * これが「reduce」に設定されている場合、Webサイトはデータ消費を減らすための最適化を行うべきです。
4 * 例えば、高解像度画像を低解像度版に切り替えたり、データ量の多い要素を非表示にしたりします。
5 */
6
7/* デフォルトのスタイル: データ削減が有効でない場合の表示 */
8/* 高解像度の背景画像を想定しています。 */
9.hero-banner {
10  background-image: url('https://example.com/images/hero-high-res.jpg'); /* 高解像度の背景画像へのパス */
11  background-size: cover;
12  background-position: center;
13  height: 300px; /* バナーの高さ */
14  color: #ffffff;
15  display: flex;
16  align-items: center;
17  justify-content: center;
18  font-family: sans-serif;
19  text-align: center;
20  padding: 20px;
21}
22
23/*
24 * ユーザーがデータ削減を有効にしている場合に適用されるスタイル。
25 * ブラウザやOSの設定で「データセーバー」などが有効になっていると「reduce」が適用されます。
26 */
27@media (prefers-reduced-data: reduce) {
28  .hero-banner {
29    background-image: url('https://example.com/images/hero-low-res.jpg'); /* 低解像度の背景画像に切り替え */
30    /* 背景画像を完全に削除することも、データ使用量をさらに削減する有効な方法です */
31    /* background-image: none; */
32    background-color: #6699cc; /* 背景画像がない場合の代替色 */
33  }
34
35  /* データ削減のために、表示が必須ではない装飾的な要素を非表示にする例 */
36  .decorative-icon {
37    display: none;
38  }
39}

CSSのprefers-reduced-dataは、ユーザーがデータ使用量を最小限に抑えたいという設定をしている場合に、Webサイトの表示を最適化するためのメディア特性です。この特性には特定の引数や戻り値はなく、ユーザーのオペレーティングシステムやブラウザの設定に基づいて、CSSのスタイルを適用するかどうかを判断します。

ユーザーが「データセーバー」モードなどを有効にしている場合、prefers-reduced-dataはreduceという値を取ります。この状態を検知するメディアクエリを使用することで、開発者はデータ消費を減らすための特定のスタイルを適用できます。

提供されたサンプルコードでは、まずデータ削減が有効でない場合のデフォルトとして、高解像度の背景画像を.hero-bannerクラスに設定しています。次に、@media (prefers-reduced-data: reduce)というメディアクエリ内で、ユーザーがデータ削減を有効にしている場合に適用されるスタイルを定義しています。ここでは、.hero-bannerの背景画像を低解像度版に切り替えたり、背景画像を完全に削除して代替色を設定したりすることで、データ量を削減する例が示されています。さらに、装飾的な.decorative-iconクラスの要素をdisplay: none;で非表示にすることも、データ削減の一環として提示されています。

このようにprefers-reduced-dataを活用することで、データ通信量に制限があるユーザーや、データプランを節約したいユーザーに対して、より高速でコスト効率の良いWeb体験を提供し、Webサイトのアクセシビリティとパフォーマンスを向上させることが可能になります。