Preferreds-reduced-motion: 動きが少ないほうがよい場合もあります

Preferreds-reduced-motion メディアクエリは、ユーザーがリクエストしたかどうかを検出します 使用されるアニメーションや動きの量を最小限に抑えます。

Thomas Steiner

装飾的なアニメーションや切り替え効果を好む人はいません。また、動きを際立たせるユーザーもいます。 視差スクロールやズーム効果などで病気になったりします。ユーザー設定のメディアです。 クエリ prefers-reduced-motion を使用すると、 より優先される傾向があります。

実生活やウェブでは動きが多すぎる

私は先日、子どもたちとアイススケートをしていました。太陽が輝き、氷が重なった素敵な日だった リンクは人々であふれていました ⛸。唯一の問題は、混雑をうまく処理できないことです。そのため 動く標的が多数あるため集中できない あたたかい 🐜? を見つめているような視覚的過負荷状態です。

</ph>

ウェブでも同じことが起こることがあります。たとえば、派手なパララックス効果や驚きの効果など、 アニメーションや動画の自動再生など、ウェブの世界では手に負えないことがあります... 幸い、現実とは異なる解決策があります。CSS メディアクエリ prefers-reduced-motion を使用すると、好みのユーザー向けのページのバリエーションを作成できます。 減らせます。動画の自動再生の禁止から 一部の純粋な装飾効果を無効にする、特定のユーザー向けにページのデザインを全面的に見直す、などが挙げられます。

機能の説明に入る前に、一歩引いて、アニメーションがどのような目的で使用されるかを考えてみましょう。 できます。必要に応じて、背景情報をスキップして、 技術面の詳細情報をご覧ください

ウェブでのアニメーション

アニメーションは多くの場合、ユーザーにフィードバックを伝えるために使用されます。たとえば、 アクションを受信し、処理中です。たとえばショッピングサイトの商品は アニメーションで「飛ぶ」仮想ショッピングカートへの追加が可能で アプリの右上にアイコンとして できます。

その他のユースケースとしては、 スケルトン画面、コンテキスト メタデータ、低品質の画像プレビューを組み合わせて、 多くの時間を費やし、全体的なエクスペリエンスがより早く感じられるようにすること。考え方としては、 ユーザーに内容をわかりやすく伝えつつ 可能な限り迅速にデータを読み込みます

最後は、アニメーション グラデーション、視差スクロール、背景などの装飾的な効果です。 その他多数あります。このようなアニメーションは多くのユーザーにとって好まれますが、一部のユーザーは好ましくないため、 気が散ったり遅くなったりします。最悪のケースでは動きが悪くて 実生活経験かのように感じさせる病気です。そのため、こうしたユーザーにとって、アニメーションを減らすことは医療 必要ありません。

体動による前庭スペクトル障害

一部のユーザーのエクスペリエンス アニメーション コンテンツに対する注意散漫や吐き気。 たとえば、スクロール アニメーションは、メインの要素以外の要素が エレメントが頻繁に移動します。例: 視差スクロール アニメーション 背景要素が前景と異なる速度で動くため、前庭障害を引き起こす可能性がある あります。前庭（内耳）障害の反応には、めまい、吐き気、片頭痛などがあります。 頭痛があり、回復にはベッドでの休息が必要になることもあります。

オペレーティング システム上のモーションを削除する

多くのオペレーティング システムには、削減されたリソースの量を減らすために優先する 継続します次のスクリーンショットは、macOS Mojave の [モーションを低減する] 設定を示しています。 Android Pie の [RemoveAnimation] 設定。この設定をオンにすると、 アプリがアニメーションを起動するなどの装飾効果を使用しないようにする必要があります。アプリケーション自体が もこの設定を尊重し、不要なアニメーションをすべて削除する必要があります。

ウェブでモーションを削除する

メディアクエリ レベル 5 では動きが軽減されます ウェブへのユーザーの好みに合わせることができますメディアクエリにより、作成者は値や特徴をテストしてクエリを実行できる レンダリングされるドキュメントとは無関係にユーザー エージェントや表示デバイスのメディアクエリ prefers-reduced-motion が使用されます。 ユーザーがオペレーティング システムの設定でアニメーションや動画の表示時間を最小限に抑えるよう 動きます。次の 2 つの値を指定できます。

• no-preference: ユーザーが基本オペレーションを選べないことを示します。 ありませんこのキーワード値は、ブール値のコンテキストでは false として評価されます。
• reduce: ユーザーがオペレーティング システムの設定 インターフェースは移動やアニメーションを最小限にし、できれば重要でないものがすべて 動きが削除されます。

CSS コンテキストと JavaScript コンテキストからのメディアクエリの操作

他のメディアクエリと同様に、prefers-reduced-motion は CSS コンテキストと JavaScript コンテキスト。

たとえば、ユーザーにクリックさせたい重要な登録ボタンがあるとします。私は 注意を引く「バイブレーション」やですが、ウェブの上級者としては、 明示的に承認されたアニメーションだけではなく、 アニメーションを無効にしているユーザーや メディアクエリを認識しないブラウザで

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

JavaScript で prefers-reduced-motion を操作する方法を説明するために、 複雑なアニメーションを Web Animations API。CSS ルールは JavaScript の場合は、ユーザー設定が変更されたときにブラウザによって動的にトリガーされます。 変更を自分でリッスンし、処理中の可能性のあるものを手動で停止する必要がある （ユーザーが許可した場合は再開します）:

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

実際のメディアクエリをかっこで囲む必要があります。

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

<picture> コンテキストからのメディアクエリの操作

たとえば、アニメーション AVIF、WebP、GIF を media 属性。(prefers-reduced-motion: no-preference) が true と評価された場合、以下の処理は安全です。 アニメーション バージョンを表示します。それ以外の場合は静的なバージョンを表示します。

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

次の例をご覧ください。デバイスのモーション設定を切り替えてみて、違いを確認します。

リクエスト時にユーザーの設定を検出する

Sec-CH-Prefers-Reduced-Motion クライアント ヒント ヘッダー により、サイトがリクエスト時にユーザーのモーション設定を必要に応じて取得できるようになります。 パフォーマンス上の理由から、サーバーが適切な CSS をインライン化できるようになります。

デモ

Rogério Vicente の素晴らしい楽曲を基にしたデモを 🐈? HTTP ステータス ネコ。まずはこのジョークを おもしろいから待ってる。戻ったところで demo。スクロールすると、各 HTTP ステータス ネコが 画面の右側か左側から交互に表示されます。滑らかで滑らかな 60 FPS ただし先ほど説明したとおり 一部のユーザーはそれを嫌いになったり デモは prefers-reduced-motion を尊重するようにプログラムされています。これは動的に機能するため、ユーザーは 設定をその場で変更できます。再読み込みは必要ありません。モーションの抑制を好む場合は、 不要な表示アニメーションは消去され、通常のスクロール動作のみが残ります。「 次のスクリーンキャストでは、デモの実例が示されています。

まとめ

現代のウェブサイトではユーザーの好みを尊重することが重要であり、ブラウザで公開される機会は増加の一途をたどっている 新たな機能が導入されました。リリース済みのもう一つの例は、 prefers-color-scheme: ユーザーがライトとダークのカラーパターンのどちらを好むかを検出します。詳しくは、 私の記事「Hello Darkness, My Old Friend」の prefers-color-scheme 🌒?。

CSS ワーキング グループはさらに標準化を ユーザーの好みのメディアクエリ prefers-reduced-transparency （ユーザーが透明度を下げることを好むかどうかを検出する） prefers-contrast（ユーザーが 隣接する色のコントラストの増減をシステムに要求している場合） および inverted-colors（ユーザーが 反転色を好む）。

（参考）すべてのウェブサイトでモーションを抑制する

すべてのサイトが prefers-reduced-motion を使用するわけではなく、自分の好みに十分ではない場合もあります。 なんらかの理由ですべてのウェブサイトの動作を停止したい場合は、実際に実行できます。データ アナリストが アクセスするすべてのウェブページに、次の CSS を含むスタイルシートが挿入されます。そこで、 は複数である ブラウザ拡張機能 自己責任で使用してください

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
  }
}

前の CSS がすべてのアニメーションと遷移の継続時間をオーバーライドするという仕組みです。 あまり目立たなくなってしまいます。アニメーションを使用しているウェブサイトは 正しく機能させるには、それを実行します（たとえば、特定のステップが animationend イベント） 急進的な animation: none !important; アプローチは機能しません。以前のハッキングでさえ、 すべてのウェブサイトで成功することが保証されている（たとえば、 Web Animations API など）が使用されるので、 障害に気づいたら無効にしてください。

関連リンク

• 最新の編集者による メディアクエリ レベル 5 仕様。
• prefers-reduced-motion がオン Chrome プラットフォームのステータス。
• prefers-reduced-motion Chromium のバグ。
• まばたき 投稿の実装の意図。

謝辞

実装した Stephen McGruer に大感謝します。 prefers-reduced-motion、および Rob Dodson - このドキュメントのレビューも行っています。 ヒーロー画像（Hannah Cauhepe 氏、Unsplash より）。