Sec-CH-Prefers-Reduced-Motion user agent client hint request header indicates the user agent's preference for animations to be displayed with reduced motion.
If a server signals to a client via the
Accept-CH header that it accepts
This header is modeled on the
prefers-reduced-motion media query.
The user agent's preference for reduced-motion animations. This is often taken from the underlying operating system's setting. The value of this directive can be either
The client makes an initial request to the server:
GET / HTTP/1.1 Host: example.com
The server responds, telling the client via
Accept-CH that it accepts
Sec-CH-Prefers-Reduced-Motion. In this example
Critical-CH is also used, indicating that
Sec-CH-Prefers-Reduced-Motion is considered a critical client hint.
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
Note: We've also specified
Sec-CH-Prefers-Reduced-Motion in the
Vary header to indicate to the browser that the served content will differ based on this header value, even if the URL stays the same, so the browser shouldn't just use an existing cached response and instead should cache this response separately. Each header listed in the
Critical-CH header should also be present in the
The client automatically retries the request (due to
Critical-CH being specified above), telling the server via
Sec-CH-Prefers-Reduced-Motion that it has a user preference for reduced-motion animations:
GET / HTTP/1.1 Host: example.com Sec-CH-Prefers-Reduced-Motion: "reduce"
The client will include the header in subsequent requests in the current session unless the
Accept-CH changes in responses to indicate that it is no longer supported by the server.
|User Preference Media Features Client Hints Headers |
BCD tables only load in the browser