Lựa chọn ưu tiên về nội dung đa phương tiện của người dùng có tiêu đề gợi ý của ứng dụng

Một nhóm tiêu đề gợi ý cho ứng dụng cho phép các trang web tuỳ ý lấy thông tin về lựa chọn ưu tiên của người dùng đối với nội dung nghe nhìn tại thời điểm yêu cầu, cho phép các máy chủ nội tuyến CSS phù hợp vì lý do hiệu suất.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

Các truy vấn nội dung đa phương tiện CSS, và cụ thể là các tính năng nội dung đa phương tiện theo lựa chọn ưu tiên của người dùng như prefers-color-scheme hoặc prefers-reduced-motion, có thể tác động đáng kể đến lượng CSS mà một trang cần phân phối và trải nghiệm mà người dùng sẽ có khi trang tải.

Tập trung vào prefers-color-scheme (nhưng lưu ý rằng lý do này cũng áp dụng cho các tính năng đa phương tiện khác về lựa chọn ưu tiên của người dùng), bạn nên không tải CSS cho bảng phối màu cụ thể không khớp trong đường dẫn hiển thị quan trọng, mà thay vào đó, ban đầu chỉ tải CSS hiện có liên quan. Một cách để làm việc này là thông qua <link media>.

Tuy nhiên, những trang web có lưu lượng truy cập cao như Google Tìm kiếm muốn tuân thủ các tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng như prefers-color-scheme và CSS nội tuyến vì lý do hiệu suất, cần biết về bảng phối màu ưu tiên (hoặc các tính năng đa phương tiện theo lựa chọn ưu tiên khác của người dùng) lý tưởng là tại thời điểm yêu cầu, để tải trọng HTML ban đầu đã có CSS phù hợp được nội tuyến.

Ngoài ra, và đặc biệt đối với prefers-color-scheme, các trang web bằng mọi cách đều muốn tránh hiện tượng màu giao diện không chính xác xuất hiện chớp nhoáng.

Sec-CH-Prefers-Color-Scheme và Sec-CH-Prefers-Reduced-Motion là tiêu đề gợi ý của ứng dụng khách đầu tiên trong chuỗi tiêu đề gợi ý của ứng dụng khách về các tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng nhằm giải quyết vấn đề này.

Thông tin cơ bản về thông tin mô tả của ứng dụng

Gợi ý cho ứng dụng HTTP xác định tiêu đề phản hồi Accept-CH mà máy chủ có thể dùng để quảng cáo việc sử dụng tiêu đề yêu cầu cho hoạt động thương lượng nội dung chủ động, thường được gọi là gợi ý cho ứng dụng. Đề xuất Tiêu đề Gợi ý cho ứng dụng đa phương tiện theo lựa chọn ưu tiên của người dùng xác định một tập hợp gợi ý cho ứng dụng nhằm truyền tải các tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng. Các gợi ý về ứng dụng khách này được đặt tên theo tính năng đa phương tiện tương ứng mà người dùng ưu tiên và chúng báo cáo. Ví dụ: bảng phối màu hiện được ưu tiên theo prefers-color-scheme sẽ được báo cáo thông qua gợi ý cho ứng dụng có tên phù hợp là Sec-CH-Prefers-Color-Scheme.

Thông tin cơ bản về thông tin mô tả quan trọng về ứng dụng

Các gợi ý về ứng dụng được đề xuất trong Tiêu đề gợi ý về ứng dụng cho các tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng có lẽ sẽ thường được dùng nhất dưới dạng Gợi ý quan trọng về ứng dụng. Critical Client Hints là Client Hints có thể thay đổi đáng kể tài nguyên kết quả. Tài nguyên như vậy phải được tìm nạp nhất quán trong các lần tải trang (kể cả lần tải trang ban đầu) để tránh các lần chuyển đổi gây khó chịu cho người dùng.

Cú pháp thông tin mô tả về ứng dụng

Các tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng bao gồm một tên (chẳng hạn như prefers-reduced-motion) và các giá trị được phép (chẳng hạn như no-preference hoặc reduce). Mỗi trường tiêu đề gợi ý cho ứng dụng đều được biểu thị dưới dạng đối tượng Tiêu đề có cấu trúc cho HTTP chứa một mục có giá trị là một chuỗi. Ví dụ: để truyền tải rằng người dùng thích giao diện tối và chuyển động giảm, các gợi ý về ứng dụng khách sẽ có dạng như trong ví dụ bên dưới.

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

CSS tương đương với thông tin được truyền tải trong các gợi ý về ứng dụng ở trên lần lượt là @media (prefers-color-scheme: dark) {} và @media (prefers-reduced-motion: reduce) {}.

Danh sách đầy đủ các gợi ý về ứng dụng

Danh sách các gợi ý cho ứng dụng được mô hình hoá theo các tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng trong Truy vấn nội dung nghe nhìn cấp 5.

Client Hint Giá trị cho phép Tính năng đa phương tiện tương ứng trong phần Lựa chọn ưu tiên của người dùng
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

Hỗ trợ trình duyệt

Tiêu đề gợi ý cho ứng dụng Sec-CH-Prefers-Color-Scheme được hỗ trợ trên Chromium 93. Tiêu đề gợi ý cho ứng dụng Sec-CH-Prefers-Reduced-Motion được hỗ trợ trên Chromium 108. Ý kiến phản hồi của các nhà cung cấp khác, cụ thể là WebKit và Mozilla, đang chờ xử lý.

Bản minh hoạ về Sec-CH-Prefers-Color-Scheme

Hãy dùng thử bản minh hoạ và lưu ý cách CSS nội tuyến thay đổi theo bảng phối màu ưu tiên của người dùng. Tìm mã nguồn trên GitHub.

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

Bản minh hoạ về Sec-CH-Prefers-Reduced-Motion

Hãy dùng thử bản minh hoạ và lưu ý cách CSS nội tuyến thay đổi theo lựa chọn ưu tiên về chuyển động của người dùng. Tìm mã nguồn trên GitHub.

Cách hoạt động

  1. Ứng dụng đưa ra yêu cầu ban đầu đến máy chủ. bash GET / HTTP/2 Host: example.com
  2. Máy chủ phản hồi, cho biết cho máy khách thông qua Accept-CH rằng máy chủ chấp nhận Sec-CH-Prefers-Color-Scheme và Gợi ý cho máy khách Sec-CH-Prefers-Contrast, trong đó theo Critical-CH, máy chủ coi Sec-CH-Prefers-Color-Scheme là Gợi ý quan trọng cho máy khách mà máy chủ cũng thay đổi phản hồi theo 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. Sau đó, ứng dụng sẽ thử lại yêu cầu, cho máy chủ biết thông qua Sec-CH-Prefers-Color-Scheme rằng ứng dụng có lựa chọn ưu tiên của người dùng đối với nội dung có giao diện tối. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. Sau đó, máy chủ có thể điều chỉnh phản hồi cho phù hợp với lựa chọn ưu tiên của ứng dụng và ví dụ: chèn CSS chịu trách nhiệm cho giao diện tối vào nội dung phản hồi.

Ví dụ về Node.js

Ví dụ về Node.js bên dưới (được viết cho khung Express.js phổ biến) cho thấy cách xử lý tiêu đề gợi ý về ứng dụng Sec-CH-Prefers-Color-Scheme có thể trông như thế nào trong thực tế. Mã này thực sự hỗ trợ bản minh hoạ ở trên.

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));
});

Những điều cần cân nhắc về quyền riêng tư và bảo mật

Nhóm Chromium đã thiết kế và triển khai Tiêu đề User Preference Media Features Client Hints (Gợi ý về tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng) dựa trên các nguyên tắc cốt lõi được xác định trong Kiểm soát quyền truy cập vào các tính năng mạnh mẽ của nền tảng web, bao gồm quyền kiểm soát của người dùng, tính minh bạch và tính tiện dụng.

Các yếu tố bảo mật của Gợi ý cho ứng dụng HTTP và Các yếu tố bảo mật về độ tin cậy của gợi ý cho ứng dụng cũng áp dụng cho đề xuất này.

Tài liệu tham khảo

Lời cảm ơn

Xin chân thành cảm ơn Yoav Weiss đã đưa ra những ý kiến phản hồi và lời khuyên quý giá. Hình ảnh chính của Tdadamemd trên Wikimedia Commons.