こんにちは。田村です。
CSSアニメーションはリッチな動きが表現でき便利ですがユーザーによってはアニメーションをオフにしたいということがあります。
OS側で「動きをへらす」という設定があり、これをCSS側で判断したい場合はありました。
prefers-reduced-motion とは？
prefers-reduced-motion は、ユーザーのOSやブラウザの設定に基づいて、動きの多いアニメーションやエフェクトを制御するためのCSSメディアクエリです。
OSの設定で「動きを減らす」という設定が提供されており、この設定が有効になっているユーザーに対し、アニメーションを軽減するスタイルを適用できます。
次のように読むそうです。
prefers-reduced-motion（プリファーズ・リデュースド・モーション）
prefers（プリファーズ）：好む
reduced（リデュースド）：減少した
motion（モーション）：動き
どんな場面で使えるのか？
動きが苦手なユーザーへの配慮
激しいアニメーションや過剰な動きを好まないユーザーに快適なユーザー体験を提供できます。
アクセシビリティ向上
WCAGの達成基準にも含まれています。
「達成基準 2.3.3: インタラクションによるアニメーションを理解する」
基本的な使い方
prefers-reduced-motion は、CSSのメディアクエリとして以下のように使います。
/* 通常時のスタイル */
.animated-box {
animation: bounce 2s infinite;
}
/* 動きを抑える設定の場合 */
@media (prefers-reduced-motion: reduce) {
.animated-box {
animation: none;
}
}
prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN
MDN Web Docs
prefers-reduced-motion は CSS のメディア特性で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。
"prefers-reduced-motion" | Can I use... Support tables for HTML5, CSS3, etc
caniuse
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
まとめ
prefers-reduced-motion は、ユーザーが動きを減らす設定をしている場合に、アニメーションを無効化または軽減できるCSSメディアクエリです。
動きに敏感なユーザーにも優しい動きを提供し、アクセシビリティを向上することができます。
関連するタグ
全 1 件中 1 〜 1 件目を表示
この記事を書いた人
たむら しょうご
HTML&CSSコーダー
ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。
