Sec-CH-Prefers-Reduced-Motion ヘッダー
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
HTTP の Sec-CH-Prefers-Reduced-Motion リクエストヘッダーはユーザーエージェントクライアントヒントで、アニメーションを動きを縮小して表示させることをユーザーエージェントが推奨することを示します。
サーバーが Accept-CH ヘッダーを介して、Sec-CH-Prefers-Reduced-Motion を受け入れることをクライアントに通知した場合、クライアントはこのヘッダーをつけて応答することで、ユーザーが動きの縮小を推奨することを示すことができます。サーバーは、クライアントに適切に調整されたコンテンツ（JavaScript や CSS など）を送信し、その後レンダリングされるコンテンツにアニメーションが存在する場合には、その動きを縮小することができます。これには、前庭性運動障碍を持つ人々の不快感を軽減するために、動きの速度や振幅を縮小することが含まれます。
このヘッダーは、prefers-reduced-motion メディアクエリーをモデルにしています。
| ヘッダー種別 | リクエストヘッダー, クライアントヒント |
|---|---|
| 禁止リクエストヘッダー | はい (Sec- 接頭辞) |
構文
Sec-CH-Prefers-Reduced-Motion: <preference>
ディレクティブ
<preference>-
ユーザーエージェントの「動きを縮小したアニメーション」に関する環境設定。多くの場合、これは基盤となるオペレーティングシステムの設定から採用されます。このディレクティブの値は、
no-preferenceまたはreduceのいずれかになります。
例
Sec-CH-Prefers-Reduced-Motion の使用
クライアントはサーバーに対して最初のリクエストを送信します。
GET / HTTP/1.1
Host: example.com
サーバーは応答し、Accept-CH を通じて、Sec-CH-Prefers-Reduced-Motion を受け入れることをクライアントに指示します。この例では Critical-CH も使用されており、Sec-CH-Prefers-Reduced-Motion が重要なクライアントヒントと考えられていることを示しています。
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Reduced-Motion
Vary: Sec-CH-Prefers-Reduced-Motion
Critical-CH: Sec-CH-Prefers-Reduced-Motion
メモ:
また、Sec-CH-Prefers-Reduced-Motion を Vary ヘッダーに指定しています。これは、URL が同じであっても、このヘッダーの値によって配信されるコンテンツが異なることをブラウザーに示すためです。これにより、ブラウザーは既存のキャッシュされたレスポンスをそのまま使用せず、このレスポンスを別個にキャッシュするようになります。Critical-CH ヘッダーに掲載されているそれぞれのヘッダーは、Accept-CH および Vary ヘッダーにも同時に存在している必要があります。
クライアントは（以上で Critical-CH が指定されているため）、リクエストを自動的に再試行し、Sec-CH-Prefers-Reduced-Motion を通じて、アニメーションの動きを控えめにするというユーザーの環境設定をサーバーに指示します。
GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Reduced-Motion: "reduce"
サーバーからのレスポンスで Accept-CH が変更され、サーバー側でこのヘッダーが対応できなくなったことが示されない限り、クライアントは現在のセッションにおける以降のリクエストにこのヘッダーを記載します。
仕様書
| 仕様書 |
|---|
| User Preference Media Features Client Hints Headers # sec-ch-prefers-reduced-motion |
ブラウザーの互換性
関連情報
- クライアントヒント
- ユーザーエージェントクライアントヒント API
Accept-CH- CSS
prefers-reduced-motionメディアクエリー - HTTP キャッシュ: Vary および
Varyヘッダー - Improving user privacy and developer experience with User-Agent Client Hints (developer.chrome.com)