ブレークポイントを超えて: CSS でのユーザー設定メディア クエリの活用

Web サイトやアプリを構築する場合、メディア クエリを使用する可能性があります。これらの便利な CSS ツールを使用すると、デバイスのサイズに応じてレイアウトを調整できます。これらはレスポンシブ デザインの重要な部分です。

デバイスの幅、アスペクト比、方向などに基づいてクエリを実行できます。これらすべてを使用すると、使用しているデバイスに合わせてレイアウトを微調整できます。

デバイスのサイズや向きではなく、ユーザーの好みに基づいてサイトやアプリをカスタマイズできるメディア クエリが他にもあることはご存知ないかもしれません。

ユーザー設定のメディアクエリ

ユーザーの好みを扱うメディア クエリがいくつかあります。これらを使用して、ユーザー向けにアプリのエクスペリエンスを微調整できます。

カラースキームを優先した自動ダークモード

最近ではダークモードがどこにでもあります。現在、どのサイトにも、ライト モードとダーク モードを切り替えるための太陽/月切り替えボタンがあるようです。これをさらに一歩進めて、prefers-color-scheme メディア クエリを使用して、ユーザーのデバイスが明るいカラー モードを使用しているか暗いカラー モードを使用しているかを自動的に判断できます。

その仕組みは次のとおりです: 通常と同じように、ライト モードの CSS スタイルを定義します。次に、メディアクエリprefers-color-scheme: darkを追加します。そこに、ライト モードの色をオーバーライドする CSS ルールを追加します。

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

ヒント: CSS 変数を使用してテーマを作成する

作業を少し楽にするために、CSS 変数のセットであるテーマですべての色を定義できます。次に、prefers-color-scheme: dark ブロック内で、CSS セレクターとルールを再追加するのではなく、変数を再定義するだけで済みます。

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

モーションを優先してトーンダウンしたアニメーション

アニメーションはアプリのエクスペリエンスを向上させることができますが、視覚や前庭に問題があるユーザーにとってアニメーションは難しい場合があります。こうしたユーザーを支援するために、一部のデバイスとオペレーティング システムには、ユーザー設定に動きを減らすオプションがあります。

prefers-reduced-motion メディア クエリを使用すると、ユーザーのデバイスでそのようなオプションがいつ有効になっているかを検出できます。その後、強度の低い代替アニメーションを使用する (または完全にオフにする) ことができます。

ここでは、prefers-reduced-motion を使用してアニメーションをオフにする例を示します。

.content {
  animation: my-awesome-animation 250ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .content {
    animation: none;
  }
}

注意すべき点が 1 つあります: このようなアニメーションをオフにする場合は、animationend イベントに依存するコードがないことを確認してください。上に示すように、アニメーションを none に設定すると、このイベントは発生しません。

prefers-reduced-motion:reducematchs の場合、アニメーションをオフにする必要はないことに注意してください。要素がビューに跳ね返る派手なリビール アニメーションがあるとします。ユーザーがモーションを減らしたい場合は、単純なフェードイン アニメーションになるようにこれを変更できます。

コントラストを優先した適応コントラスト

視覚障害のある一部のユーザーは、デバイスでコントラストの増加を有効にしている可能性があります。このような状況は、prefers-contrast メディア クエリを使用して処理できます。

このメディア クエリが一致する場合は、コントラストを調整して、これらのユーザーが見やすくすることができます。

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

JavaScriptでメディアクエリをチェックする

JavaScript を使用してアニメーションを作成しているとします。たとえば、Web アニメーション API を使用しているとします。これらのアニメーションは CSS で定義されていないため、prefers-reduced-motion メディア クエリでオフにすることはできません。

それともできますか?

はい！ window.matchMedia メソッドを使用して、JavaScript からメディア クエリを評価できます。メディア クエリは引数として渡され、メソッドは MediaQueryList と呼ばれるものを返します。

このオブジェクトには、このメディア クエリが現在一致するかどうかを示すブール値であるmatchesプロパティがあります。値に基づいて、アニメーション化するかどうかを決定できます。

これは、window.matchMedia を使用して DOM 要素に対して条件付きで animate を呼び出す方法を示す簡単な例です。

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

変化への対応

MediaQueryList には、条件が変化してメディア クエリが適用されなくなった場合に発生する変更イベントもあります。

大きなディスプレイに対してのみ実行したい JavaScript コードがあるとします。ユーザーの画面サイズが小さい場合は、このコードをスキップしてください。これを行うには、max-width クエリなどを使用して window.matchMedia を呼び出します。

後でユーザーがウィンドウのサイズを変更し、大画面固有の JavaScript コードを実行するとします。 MediaQueryList の変更イベントをリッスンするだけで、イベントのmatches プロパティをチェックして、新しい値が何であるかを確認できます。

まとめ

これらのメディア クエリは、Web サイトまたはアプリ内でのユーザー エクスペリエンスをより適切にパーソナライズするのに役立ちます。暗い配色を自動的に適用したり、ユーザーの好みに応じてアニメーションやコントラストを微調整したりすることもできます。また、アクセシビリティにも役立ち、常に効果があります。

これはまだ実験段階ですが、ユーザーのデバイスにデータ使用量を削減する要件があるかどうかを示す、prefers-reduced-data クエリにも注目してください。これを使用して、使用するデータ量が少ない代替コンテンツを提供できます。たとえば、重要でない画像をスキップする (または低解像度のバージョンを使用する) ことができます。

以上がブレークポイントを超えて: CSS でのユーザー設定メディア クエリの活用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。