Sec-CH-Prefers-Color-Scheme header
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Tiêu đề HTTP Sec-CH-Prefers-Color-Scheme request header là một gợi ý máy khách về tính năng media cung cấp sở thích của người dùng về chủ đề màu sáng hoặc tối.
Người dùng cho biết sở thích của họ thông qua cài đặt hệ điều hành (ví dụ: chế độ sáng hoặc tối) hoặc cài đặt tác nhân người dùng.
Nếu máy chủ báo hiệu cho máy khách thông qua tiêu đề Accept-CH rằng nó chấp nhận Sec-CH-Prefers-Color-Scheme, máy khách có thể phản hồi bằng tiêu đề này để cho biết sở thích của người dùng về một chủ đề màu cụ thể. Máy chủ có thể gửi nội dung phù hợp cho máy khách, bao gồm hình ảnh hoặc CSS để hiển thị chế độ sáng hoặc tối cho nội dung được render sau đó.
Tiêu đề này được mô phỏng theo truy vấn media CSS prefers-color-scheme.
| Loại tiêu đề | Request header, Client hint |
|---|---|
| Forbidden request header | Có (tiền tố Sec-) |
Ghi chú sử dụng
Tiêu đề Sec-CH-Prefers-Color-Scheme cho phép các trang web nhận sở thích về chủ đề màu của người dùng tại thời điểm yêu cầu; sau đó họ có thể chọn cung cấp CSS phù hợp cho sở thích của người dùng ngay lập tức, vì lý do hiệu suất. Nếu máy chủ nhúng CSS, nó có thể muốn bao gồm tiêu đề phản hồi Vary chỉ định Sec-CH-Prefers-Color-Scheme, để cho biết rằng phản hồi được tùy chỉnh cho một chủ đề màu cụ thể.
Nếu hiệu suất không phải là yếu tố quan trọng trong ngữ cảnh này, bạn có thể thay thế bằng cách xử lý sở thích chủ đề màu của người dùng bằng truy vấn media prefers-color-scheme, và/hoặc API Window.matchMedia().
Sec-CH-Prefers-Color-Scheme là gợi ý entropy cao nên trang web cần chọn nhận nó bằng cách gửi tiêu đề phản hồi Accept-CH phù hợp. Tác nhân người dùng có thể cố ý bỏ qua tiêu đề Sec-CH-Prefers-Color-Scheme để bảo vệ quyền riêng tư của người dùng vì sở thích của người dùng, về lý thuyết, có thể được dùng để lấy dấu vân tay.
Cú pháp
Sec-CH-Prefers-Color-Scheme: <preference>
Chỉ thị
<preference>-
Chuỗi cho biết sở thích của tác nhân người dùng về nội dung tối hoặc sáng:
"light"hoặc"dark". Giá trị có thể xuất phát từ cài đặt tương ứng trong hệ điều hành cơ bản.
Ví dụ
Sử dụng Sec-CH-Prefers-Color-Scheme
Máy khách thực hiện yêu cầu ban đầu đến máy chủ:
GET / HTTP/1.1
Host: example.com
Máy chủ phản hồi, báo cho máy khách thông qua Accept-CH rằng nó chấp nhận Sec-CH-Prefers-Color-Scheme. Trong ví dụ này, Critical-CH cũng được sử dụng, cho biết rằng Sec-CH-Prefers-Color-Scheme được coi là gợi ý máy khách quan trọng.
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
Note:
Chúng tôi cũng đã chỉ định Sec-CH-Prefers-Color-Scheme trong tiêu đề Vary để cho biết rằng các phản hồi nên được lưu riêng biệt dựa trên giá trị của tiêu đề này (ngay cả khi URL không thay đổi).
Mỗi tiêu đề được liệt kê trong tiêu đề Critical-CH cũng phải có trong tiêu đề Accept-CH và Vary.
Máy khách tự động thử lại yêu cầu (do Critical-CH được chỉ định ở trên), báo cho máy chủ thông qua Sec-CH-Prefers-Color-Scheme rằng nó có sở thích của người dùng về nội dung tối:
GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Máy khách sẽ bao gồm tiêu đề trong các yêu cầu tiếp theo trong phiên hiện tại, trừ khi Accept-CH thay đổi trong các phản hồi để cho biết rằng nó không còn được máy chủ hỗ trợ.
Đặc tả
| Specification |
|---|
| User Preference Media Features Client Hints Headers # sec-ch-prefers-color-scheme |
Tương thích trình duyệt
Xem thêm
- Client hints
- User-Agent Client Hints API
Accept-CH- HTTP Caching varying responses và tiêu đề
Vary - Truy vấn media CSS
prefers-color-scheme - Improving user privacy and developer experience with User-Agent Client Hints (developer.chrome.com)