CSS と JavaScript を使用してユーザーのモーションとテーマの好みに適応する-CSSチュートリアル-php.cn

Oscar Jite-Orimiono 著✏️

インターネットには、ウェブサイトを魅力的かつ過度に刺激する色、アニメーション、グラフィック効果が溢れています。フロントエンドの愛好家や専門家として、私たちは鮮やかなビジュアルと、より落ち着いたエクスペリエンスを好むユーザー向けのアクセスしやすいユーザー中心のオプションのバランスをとる必要があります。

この記事では、以下の項目を検討することで、より少ない労力でより多くのことを実現します。

アニメーションやテーマを管理するために、prefers-reduced-motion やprefers-color-scheme などのメディアクエリを使用する方法を学びます
@media ルールの正しい構文に従ってユーザー設定を適用してください
接続が制限されているユーザーのデータ使用を最小限に抑える、prefers-reduced-data などのオプションを表示します

Adapting to user motion and theme preferences with CSS and JavaScript

モーションの設定

多くのユーザーにとって、アニメーションは Web サイトでのエクスペリエンスを向上させることができますが、他のユーザーの操作を妨げる可能性があります。動きが多すぎると、不快感を引き起こしたり、気が散ったりする可能性があり、さらにパフォーマンスの問題を引き起こす可能性があります。

prefers-reduced-motion メディアクエリは、ユーザーがコンピュータで Web サイトのアニメーションを制限する設定を有効にしているかどうかを確認します。動きを減らしたいユーザーのために、アニメーションを変更したり、完全に無効にすることができます。

まず、アニメーションを含む Web ページを作成しましょう。アニメーションの縞模様の背景はどうでしょうか?

ページの HTML は次のとおりです:

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

ログイン後にコピー

アニメーション化されたストライプは次のようになります:

Adapting to user motion and theme preferences with CSS and JavaScript

no-preference 構文は優先設定を持たないユーザー向けであり、reduce は優先設定を行うユーザー向けです。モーションを減らしたいユーザーのために、アニメーションを完全に無効にしたり、変更したりすることができます。ここでは、prefers-reduced-motion メディアクエリを使用して背景の移動を無効にする方法を示します:

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

ログイン後にコピー

補足: Windows 11 を実行しているデバイスでは、設定、 に移動し、アクセシビリティ、視覚効果の順に選択し、オフに切り替えることでアニメーションを無効にできます。 アニメーション効果。このプロセスは、ほぼすべての種類のデバイス/オペレーティングシステムで同様です。

これが CodePen です:

アニメーションを無効にする代わりに、アニメーションの種類を変更することもできます。たとえば、モーションを減らしたいユーザーのために、スライドイン変換アニメーションの代わりにフェードインアニメーションを使用します。

ページの片側から要素がスライドするスクロールアニメーションを使用する場合は、フェードインなどのより単純な効果に切り替えることができます。

シンプルなスクロールアニメーションの CSS は次のとおりです:

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

ログイン後にコピー

この例では、ボックス要素が Web ページの右側からフェードインし、左側に向かって移動します。この動きは、transform プロパティによって制御されるため、モーションを減らしたいユーザーは単純に削除できます。

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

ログイン後にコピー

優先権を持たないユーザーはスクロールすると次の画面が表示されます:

Adapting to user motion and theme preferences with CSS and JavaScript

reduce を使用したユーザーには次のものが表示されます:

Adapting to user motion and theme preferences with CSS and JavaScript

prefers-reduced-motion メディアクエリを使用すると、ユーザーの希望に応じて、複雑なアニメーションの調子を調整したり遅くしたり、完全に無効にしたりできます。

これは、デバイス上でアニメーションを無効にして違いを確認できる場所と対話するための CodePen です:

乗り物酔いやめまいなどの前庭障害のあるユーザーは、アニメーションを見ると方向感覚を失ったり、めまいを感じたりすることがあります。シンプルな UI を好むユーザーにとって、アニメーションは気が散る可能性もあります。

動きを減らすオプションがあると、動きに敏感なユーザーにとって Web サイトがより快適に使用できるようになります。

テーマの設定

Web サイトやアプリケーションでは、明るいテーマから暗いテーマに切り替えるオプションがあるのが一般的になっています。一部の Web サイトでは、システム設定に基づいて追加のオプションが提供されます。

prefers-color-scheme メディアクエリは、ユーザーが暗いテーマを好むか明るいテーマを好むかを検出します。ユーザーは、デバイスの設定に基づいてデフォルトのテーマを取得できます。

これは明るい色の Web ページです:

Adapting to user motion and theme preferences with CSS and JavaScript

これは、デフォルトのテーマがライトの場合にユーザーに表示される内容です。次に、prefers-color-scheme を使用してダークテーマを作成できます。

.box {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
  transform: translateX(0);
  opacity: 1;
}
@keyframes reveal {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

ログイン後にコピー

ライトモードとダークモードの両方でこのように CSS ルールを記述するのは、特に複数のプロパティが同じ値を共有する場合、作業が多すぎる可能性があります。変数を使用して配色を計画すると、繰り返しを避けるのに役立ちます:

@media (prefers-reduced-motion: reduce) {
  .box {
    transform: translateX(0);
  }
}

ログイン後にコピー

これは前と同じページのスクリーンショットですが、ダークモードが有効になっています:

Adapting to user motion and theme preferences with CSS and JavaScript

操作できる CodePen は次のとおりです:

prefers-color-scheme は色だけに限定されません。これを使用して画像を交換できます:

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

ログイン後にコピー

ライトモードでの Web ページのスクリーンショットは次のとおりです:

Adapting to user motion and theme preferences with CSS and JavaScript
Unsplash の Plufow Le Studio による背景写真。

そして、これがダークモードのページです:

[キャプション>
Unsplash の Plufow Le Studio による背景写真。

ベストプラクティス

読みやすさを高めるために、使用する前に色のコントラストを必ずテストしてください。使用する色の選択に役立つツールがいくつかあります。

テーマを切り替えるときは、背景やテキストだけでなく、更新が必要なあらゆる要素を考慮してください。これが、CSS 変数を使用してテーマを保存することをお勧めする理由です。場合によっては、ボタン、影、境界線、リンクなどの代替を提供する必要があります。

実装

ユーザー設定を実装する最も簡単な方法は、@media ルールを使用することです。モーションまたはテーマの設定を指定する必要があります。指定しないと、メディアクエリ内の CSS ルールが他のルールやデバイス設定をオーバーライドします。

これは、モーションの設定については、縮小するか非設定にするかを指定し、テーマについては明るいか暗いかを指定する必要があることを意味します。

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

ログイン後にコピー

これはコードをテストするときに便利ですが、実装前に必ず正確な設定を指定してください。

JavaScript を使用したユーザー設定の実装

ユーザー設定は JavaScript を使用して実装することもできます。ユーザー設定に基づいて、特定の要素に新しいクラスを追加できます。

アニメーション化されたストライプを使用した最初の例を使用して、JavaScript でユーザー設定を確認する方法を次に示します。

.box {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
  transform: translateX(0);
  opacity: 1;
}
@keyframes reveal {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

ログイン後にコピー

CSS は次のとおりです:

@media (prefers-reduced-motion: reduce) {
  .box {
    transform: translateX(0);
  }
}

ログイン後にコピー

擬似要素は DOM の一部ではなく、JavaScript で直接選択できないため、このアプローチになっていることに注意してください。

データ属性を使用したユーザー設定の実装

カスタム HTML データ属性と JavaScript を使用すると、ユーザー設定を実装できます。データ属性を使用すると、ドキュメントの構造に影響を与えることなく、HTML 要素に情報を保存できます。これらはデータ接頭辞を使用しており、JavaScript を使用して簡単に操作できます:

@media (prefers-color-scheme: dark) {
    #main {
    background-image: repeating-linear-gradient(
      45deg,
      #553c9a,
    #553c9a 50px,
    #3a1e4f 50px,
    #3a1e4f 100px,
    #301934 100px,
    #301934 150px
    );
  }
  nav{
    background: rgba(0, 0, 0, 0.5);
  }
  .logo a,
  nav ul li a{
    color: #b393d3;
  }
  .content {
    background: rgba(0, 0, 0, 0.5);
  }
  .content h1 {
    color: #b393d3;
  }
  .content p{
    color: #b393d3;
  }
}

ログイン後にコピー

CSS は次のとおりです:

<div>



<p>And here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 110px);
    background: repeating-linear-gradient(
      45deg,
      #553c9a 0%,
      #553c9a 25%,
      #301934 25%,
      #301934 50%
    );
    background-size: 110px 110px;
    animation: animateStripes 2s linear infinite;
  }
}
@keyframes animateStripes {
 to {
    transform: translateX(-110px);
  }
}

ログイン後にコピー

データ使用量の削減

まだ実験段階ですが、prefers-reduced-data は、ユーザーがデータの保存を希望するかどうかを Web サイトが検出できるようにするメディアクエリとして提案されています。

これは、prefers-reduced-motion メディアクエリと同じ構文を使用します。これは、軽量コンテンツを好むユーザーに対しては rede であり、データ設定を持たないユーザーに対しては no-preference です。

その潜在的な用途には、高解像度画像の縮小、代替フォントの読み込み、自動再生ビデオの無効化、重要でないコンテンツの遅延読み込みなどがあります。このメディアクエリは、限られたデータプランや高価なデータプラン、または信頼性の低いインターネット接続を使用しているユーザーの読み込み時間を短縮するのに役立ちます。

最後の言葉

ユーザーの好みを尊重することは、すべてのユーザーのエクスペリエンスを向上させるために非常に重要です。このチュートリアルでは、prefers-reduced-motion メディアクエリとprefers-color-scheme メディアクエリを使用して、ユーザーのモーションとテーマ設定を検出する方法を学びました。コントラストと透明度の設定に関する @media ルールもあります。

Web 開発者であるあなたは、あらゆる種類のユーザーにとってあらゆる Web サイトを快適でアクセスしやすく、効率的なものにする力を持つアーキテクトです。

フロントエンドがユーザーの CPU を占有していませんか?

Web フロントエンドがますます複雑になるにつれて、リソースを貪欲な機能がブラウザーに要求します。本番環境のすべてのユーザーのクライアント側の CPU 使用率、メモリ使用量などを監視および追跡することに興味がある場合は、LogRocket を試してください。

Adapting to user motion and theme preferences with CSS and JavaScript

LogRocket は Web アプリやモバイルアプリ用の DVR のようなもので、Web アプリ、モバイルアプリ、または Web サイトで発生するすべてを記録します。問題が発生する原因を推測する代わりに、主要なフロントエンドパフォーマンスメトリクスを集計してレポートし、アプリケーションの状態とともにユーザーセッションを再生し、ネットワークリクエストをログに記録し、すべてのエラーを自動的に明らかにすることができます。

Web アプリやモバイルアプリのデバッグ方法を最新化します。無料で監視を始めましょう。

以上がCSS と JavaScript を使用してユーザーのモーションとテーマの好みに適応するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。