使用者偏好設定媒體功能用戶端提示標頭

一組用戶端提示標頭可讓網站在要求時選擇取得使用者的媒體偏好設定，讓伺服器可基於效能考量內嵌正確的 CSS。

François Beaufort
François Beaufort
GitHub
Thomas Steiner

CSS 媒體查詢，尤其是 使用者偏好媒體功能 (例如 prefers-color-scheme 或 prefers-reduced-motion)，可能會對網頁需要傳送的 CSS 數量，以及使用者在網頁載入時的體驗，造成重大影響。

請將重點放在 prefers-color-scheme，但請注意，這項最佳做法也適用於其他使用者偏好設定媒體功能。在重要運算路徑中，不要為特定不相符的配色方案載入 CSS，而是一開始只載入目前相關的 CSS。其中一種方法是透過 <link media>。

不過，如果是人氣很高的網站 (例如 Google 搜尋)，為了因應使用者偏好的媒體功能 (例如 prefers-color-scheme)，並基於效能考量而內嵌 CSS，最好在要求時就知道偏好的色彩配置 (或其他使用者偏好的媒體功能)，這樣一來，初始 HTML 酬載就會內嵌正確的 CSS。

此外，特別針對 prefers-color-scheme，網站應盡可能避免閃爍不準確的色彩主題。

Sec-CH-Prefers-Color-Scheme 和 Sec-CH-Prefers-Reduced-Motion 用戶端提示標頭是一系列用戶偏好媒體功能用戶端提示標頭的第一個，旨在解決這個問題。

用戶端提示的背景資訊

HTTP 用戶端提示定義了 Accept-CH 回應標頭，伺服器可使用該標頭宣告使用要求標頭，以便主動協商內容，這通常稱為用戶端提示。「使用者偏好媒體功能用戶端提示標頭」提案定義了一組用戶端提示，旨在傳達使用者偏好媒體功能。這些用戶端提示會以其回報的對應使用者偏好設定媒體功能命名。舉例來說，系統會透過適當命名的 Sec-CH-Prefers-Color-Scheme 用戶端提示，回報目前依據 prefers-color-scheme 偏好的色彩配置。

重要用戶端提示的背景資訊

使用者偏好設定媒體功能用戶端提示標頭中提出的用戶端提示，最常用於重要用戶端提示。重要用戶端提示是用戶端提示，可有效變更產生的資源。這類資源應在各次網頁載入 (包括初始網頁載入) 中一致擷取，以免使用者看到不連貫的切換畫面。

用戶端提示語法

使用者偏好設定媒體功能包含名稱 (例如 prefers-reduced-motion) 和允許的值 (例如 no-preference 或 reduce)。每個用戶端提示標頭欄位都會以 HTTP 的結構化標頭物件表示，其中包含一個項目，其值為 字串。舉例來說，如果要傳達使用者偏好深色主題和減少動畫效果，請參考下方範例中的客戶提示。

GET / HTTP/2
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Sec-CH-Prefers-Reduced-Motion: "reduce"

上述用戶端提示中傳達的資訊，其 CSS 等價分別為 @media (prefers-color-scheme: dark) {} 和 @media (prefers-reduced-motion: reduce) {}。

完整的用戶端提示清單

用戶端提示清單的設計方式，是參考媒體查詢第 5 級的使用者偏好媒體功能。

用戶端提示 接受的值 對應的使用者偏好設定媒體功能
Sec-CH-Prefers-Reduced-Motion no-preference、reduce prefers-reduced-motion
Sec-CH-Prefers-Reduced-Transparency no-preference、reduce prefers-reduced-transparency
Sec-CH-Prefers-Contrast no-preference、less、more、custom prefers-contrast
Sec-CH-Forced-Colors active、none forced-colors
Sec-CH-Prefers-Color-Scheme light、dark prefers-color-scheme
Sec-CH-Prefers-Reduced-Data no-preference、reduce prefers-reduced-data

瀏覽器支援

Chromium 93 支援 Sec-CH-Prefers-Color-Scheme 用戶端提示標頭。Chromium 108 支援 Sec-CH-Prefers-Reduced-Motion 用戶端提示標頭。其他供應商的意見回饋 (即 WebKit 和 Mozilla) 仍在處理中。

Sec-CH-Prefers-Color-Scheme 的示範

請試試 Chromium 93 中的示範，並注意內嵌 CSS 如何根據使用者偏好的色彩配置而變更。

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

Sec-CH-Prefers-Reduced-Motion 的示範

請試試 Chromium 108 中的示範，並注意內嵌 CSS 如何根據使用者的動畫偏好設定而變更。

運作方式

  1. 用戶端向伺服器發出初始要求。 bash GET / HTTP/2 Host: example.com
  2. 伺服器會回應，透過 Accept-CH 告知用戶端，它接受 Sec-CH-Prefers-Color-Scheme 和 Sec-CH-Prefers-Contrast 用戶端提示，其中根據 Critical-CH，它會將 Sec-CH-Prefers-Color-Scheme 視為 Critical 用戶端提示，並根據 Vary 傳達的內容變更回應。bash HTTP/2 200 OK Content-Type: text/html Accept-CH: Sec-CH-Prefers-Color-Scheme, Sec-CH-Prefers-Contrast Vary: Sec-CH-Prefers-Color-Scheme Critical-CH: Sec-CH-Prefers-Color-Scheme
  3. 接著，用戶端會重試要求，透過 Sec-CH-Prefers-Color-Scheme 告知伺服器，使用者偏好使用深色系內容。bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. 接著，伺服器就能根據用戶端偏好設定調整回應，例如將負責深色主題的 CSS 內嵌至回應主體。

Node.js 範例

以下 Node.js 範例是為熱門的 Express.js 架構編寫，說明如何在實際操作中處理 Sec-CH-Prefers-Color-Scheme 用戶端提示標頭。這段程式碼實際上是上述示範的動力來源。

app.get("/", (req, res) => {
  // Tell the client the server accepts the `Sec-CH-Prefers-Color-Scheme` client hint…
  res.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server's response will vary based on its value…
  res.set("Vary", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server considers this client hint a _critical_ client hint.
  res.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
  // Read the user's preferred color scheme from the headers…
  const prefersColorScheme = req.get("sec-ch-prefers-color-scheme");
  // …and send the adequate HTML response with the right CSS inlined.
  res.send(getHTML(prefersColorScheme));
});

隱私權和安全性考量

Chromium 團隊根據「控制強大網路平台功能的存取權」一文中定義的核心原則，設計並實作使用者偏好設定媒體功能的用戶端提示標頭，包括使用者控制、資訊公開和人體工學。

這項提案也適用於 HTTP 用戶端提示的安全性考量和用戶端提示可靠度的安全性考量。

參考資料

特別銘謝

感謝 Yoav Weiss 提供寶貴意見和建議。主頁橫幅圖片由 Tdadamemd 提供，取自 Wikimedia Commons。