ブレークポイントを超えて: CSS でのユーザー設定メディアクエリの活用-jsチュートリアル-php.cn

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

DDD

リリース： 2024-10-27 05:29:03

オリジナル

812 人が閲覧しました

Beyond breakpoints: Leveraging user preference media queries in 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 サイトの他の関連記事を参照してください。