Sec-CH-Prefers-Color-Scheme 標頭
HTTP Sec-CH-Prefers-Color-Scheme 請求標頭是一個媒體特性客戶端提示,它提供使用者對淺色或深色主題的偏好。使用者透過作業系統設定(例如,淺色或深色模式)或使用者代理設定來表明他們的偏好。
如果伺服器透過 Accept-CH 標頭向客戶端發出訊號,表明它接受 Sec-CH-Prefers-Color-Scheme,則客戶端可以隨後透過此標頭響應,以表明使用者對特定顏色方案的偏好。伺服器可以傳送經過適當調整的內容(包括影像或 CSS)給客戶端,以便為後續渲染的內容顯示淺色或深色模式。
此標頭是根據 prefers-color-scheme 媒體查詢建模的。
用法說明
Sec-CH-Prefers-Color-Scheme 標頭允許網站在請求時獲取使用者顏色方案偏好;然後,出於效能原因,它們可以選擇內聯提供與使用者偏好相關的 CSS。如果伺服器內聯 CSS,它可能希望包含一個 Vary 響應標頭,指定 Sec-CH-Prefers-Color-Scheme,以表明響應是為特定顏色方案定製的。
如果在此上下文中效能不是關鍵考慮因素,你可以轉而使用 prefers-color-scheme 媒體查詢和/或 Window.matchMedia() API 來處理使用者的顏色方案偏好。
Sec-CH-Prefers-Color-Scheme 是一個高熵提示,因此網站需要透過傳送適當的 Accept-CH 響應標頭來選擇接收它。使用者代理可能會有意省略 Sec-CH-Prefers-Color-Scheme 標頭以保護使用者隱私,因為理論上使用者的偏好可能被用於指紋識別。
語法
Sec-CH-Prefers-Color-Scheme: <preference>
指令
<preference>-
一個字串,指示使用者代理對深色或淺色內容的偏好:“
"light"”或“"dark"”。該值可能源自底層作業系統中的相應設定。
示例
使用 Sec-CH-Prefers-Color-Scheme
客戶端向伺服器發出初始請求
GET / HTTP/1.1
Host: example.com
伺服器響應,透過 Accept-CH 告知客戶端它接受 Sec-CH-Prefers-Color-Scheme。在此示例中,還使用了 Critical-CH,表明 Sec-CH-Prefers-Color-Scheme 被視為關鍵客戶端提示。
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Color-Scheme
Vary: Sec-CH-Prefers-Color-Scheme
Critical-CH: Sec-CH-Prefers-Color-Scheme
注意: 我們還在 Vary 標頭中指定了 Sec-CH-Prefers-Color-Scheme,以表明響應應該根據此標頭的值單獨快取(即使 URL 保持不變)。Critical-CH 標頭中列出的每個標頭也應存在於 Accept-CH 和 Vary 標頭中。
客戶端自動重試請求(由於上面指定了 Critical-CH),透過 Sec-CH-Prefers-Color-Scheme 告知伺服器它對深色內容有使用者偏好
GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
客戶端將在當前會話的後續請求中包含此標頭,除非響應中的 Accept-CH 發生變化,表明伺服器不再支援它。
規範
| 規範 |
|---|
| 使用者偏好媒體特性客戶端提示標頭 # sec-ch-prefers-color-scheme |
瀏覽器相容性
載入中…
另見
- 客戶端提示
- 使用者代理客戶端提示 API
Accept-CH- HTTP 快取可變響應和
Vary標頭 prefers-color-schemeCSS 媒體查詢- 透過使用者代理客戶端提示改善使用者隱私和開發者體驗 (developer.chrome.com)