← Back to release summary

Sec-CH-Prefers-Reduced-Transparency User Preference Media Features Client Hints Header

Category
Network / Connectivity
Type
New or changed feature
Status
Enabled by default (Chrome 119)
Intent stage
Start prototyping

Summary

User Preference Media Features Client Hints Header defines a set of HTTP Client Hints headers around user preference media features as defined by Media Queries Level 5. If used as Critical Client Hints, these headers allow servers to make smart choices regarding, e.g., CSS inlining. Sec-CH-Prefers-Reduced-Transparency reflects the user's prefers-reduced-transparency preference.

Motivation

CSS media queries, and specifically user preference media features like `prefers-reduced-transparent` or `prefers-reduced-motion`, have a potentially significant impact on the amount of CSS that needs to be delivered by a page, and on the experience the user is going to have when the page loads. Focusing on `prefers-color-scheme`—but highlighting that the reasoning applies to other user preference media features as well—it is a best practice to not load CSS for the particular non-matching color scheme in the critical rendering path, and instead to initially only load the currently relevant CSS. One way of doing so is via `<link media>`. However, high-traffic sites like Google Search that wish to honor user preference media features like `prefers-color-scheme` and that inline CSS for performance reasons, need to know about the preferred color scheme (or other user preference media features respectively) ideally at request time, so that the initial HTML payload already has the right CSS inlined.

Standards & signals

Samples: https://sec-ch-prefers-reduced-transparency.glitch.me

Explainers: https://github.com/wicg/user-preference-media-features-headers/blob/main/README.md

View on chromestatus.com